Webpack sass loader решает абсолютный путь
Я хочу иметь возможность использовать абсолютные пути в @import заявления. Что-то вроде:
@import '/templates/common/variables'
Тем не менее, sass, кажется, разрешает это как абсолютный URL в моей файловой системе. Я хочу, чтобы это выглядело в папке моего проекта. Например. мой файл на самом деле находится в /home/username/project/templates/common/_variables.scss
Это как-то возможно?
Я уже посмотрел на includePaths но это, похоже, ничего не делает.
Я использую Encore, чтобы написать свой файл веб-пакета, он выглядит примерно так:
const Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath("web/build/")
.setPublicPath("/build")
// [...]
.enableSassLoader(options => {
options.includePaths = [path.resolve(__dirname, '/web')];
})
;
А также вот сгенерированная конфигурация веб-пакета (довольно длинная, и я не заменил свои реальные пути моими примерами путей сверху):
{
context:'/var/www',
entry:{
index:[
'./polyfills.js',
'./web/typo3conf/ext/hn_project/ext_index.js',
'./web/typo3conf/ext/hn_templates/ext_index.js'
],
backend:[
'./polyfills.js',
'./web/typo3conf/ext/hn_project/ext_backend.js'
]
},
output:{
path:'/var/www/web/build',
filename:'[name].[chunkhash:8].js',
publicPath:'/build/',
pathinfo:false
},
module:{
rules:[
{
test:/\.jsx?$/,
exclude:/(node_modules|bower_components)/,
use:[
{
loader:'babel-loader',
options:{
cacheDirectory:true,
presets:[
[
'env',
{
modules:false,
targets:{
browsers:[
'and_chr 67',
'and_uc 11.8',
'chrome 67',
'chrome 66',
'chrome 65',
'edge 17',
'edge 16',
'firefox 60',
'firefox 59',
'firefox 52',
'ie 11',
'ie 10',
'ie_mob 11',
'ie_mob 10',
'ios_saf 11.3',
'ios_saf 11.0-11.2',
'opera 53',
'opera 52',
'safari 11.1',
'safari 11',
'samsung 6.2'
],
uglify:true
},
useBuiltIns:true
}
]
],
plugins:[
]
}
}
]
},
{
test:/\.css$/,
use:[
{
loader:'/var/www/node_modules/extract-text-webpack-plugin/dist/loader.js',
options:{
omit:1,
remove:true
}
},
{
loader:'style-loader'
},
{
loader:'css-loader',
options:{
minimize:true,
sourceMap:false,
importLoaders:1
}
},
{
loader:'postcss-loader',
options:{
sourceMap:false,
ident:'postcss',
plugins:[
{
[
Function:plugin
] options:{
grid:false
},
browsers:undefined,
info:[
Function
],
postcssPlugin:'autoprefixer',
postcssVersion:'6.0.23'
}
]
}
}
]
},
{
test:/\.(png|jpg|jpeg|gif|ico|svg|webp)$/,
loader:'url-loader',
options:{
name:'images/[name].[hash:8].[ext]',
publicPath:'/build/',
limit:4096
}
},
{
test:/\.(woff|woff2|ttf|eot|otf)$/,
loader:'url-loader',
options:{
name:'fonts/[name].[hash:8].[ext]',
publicPath:'/build/',
limit:4096
}
},
{
test:/\.s[ac]ss$/,
use:[
{
loader:'/var/www/node_modules/extract-text-webpack-plugin/dist/loader.js',
options:{
omit:1,
remove:true
}
},
{
loader:'style-loader'
},
{
loader:'css-loader',
options:{
minimize:true,
sourceMap:false,
importLoaders:1
}
},
{
loader:'postcss-loader',
options:{
sourceMap:false,
ident:'postcss',
plugins:[
{
[
Function:plugin
] options:{
grid:false
},
browsers:undefined,
info:[
Function
],
postcssPlugin:'autoprefixer',
postcssVersion:'6.0.23'
}
]
}
},
{
loader:'resolve-url-loader',
options:{
sourceMap:false
}
},
{
loader:'sass-loader',
options:{
sourceMap:true,
includePaths:[
'/web'
]
}
}
]
}
]
},
plugins:[
ExtractTextPlugin {
filename:'[name].[contenthash:8].css',
id:1,
options:{
allChunks:false
}
},
DeleteUnusedEntriesJSPlugin {
entriesToDelete:[
]
},
ManifestPlugin {
opts:{
publicPath:null,
basePath:'build/',
fileName:'manifest.json',
transformExtensions:/^(gz|map)$/i,
writeToFileEmit:true,
seed:null,
filter:null,
map:null,
generate:null,
sort:null,
serialize:[
Function:serialize
]
}
},
LoaderOptionsPlugin {
options:{
debug:false,
options:{
context:'/var/www',
output:{
path:'/var/www/web/build'
}
},
test:{
test:[
Function:test
]
}
}
},
HashedModuleIdsPlugin {
options:{
hashFunction:'md5',
hashDigest:'base64',
hashDigestLength:4
}
},
WebpackChunkHash {
algorithm:'md5',
digest:'hex',
additionalHashContent:[
Function
]
},
ProvidePlugin {
definitions:{
'$':'jquery',
jQuery:'jquery',
'window.jQuery':'jquery'
}
},
CleanWebpackPlugin {
paths:[
'**/*'
],
options:{
root:'/var/www/web/build',
verbose:false,
allowExternal:false,
dry:false
}
},
DefinePlugin {
definitions:{
'process.env':{
NODE_ENV:'"production"'
}
}
},
UglifyJsPlugin {
options:{
sourceMap:false
}
},
FriendlyErrorsWebpackPlugin {
compilationSuccessInfo:{
messages:[
]
},
onErrors:undefined,
shouldClearConsole:false,
formatters:[
[
Function:format
],
[
Function:format
],
[
Function:format
],
[
Function:format
],
[
Function:format
],
[
Function:format
]
],
transformers:[
[
Function:transform
],
[
Function:transform
],
[
Function:transform
],
[
Function:transform
],
[
Function:transform
],
[
Function:transform
]
]
},
AssetOutputDisplayPlugin {
outputPath:'web/build',
friendlyErrorsPlugin:FriendlyErrorsWebpackPlugin {
compilationSuccessInfo:{
messages:[
]
},
onErrors:undefined,
shouldClearConsole:false,
formatters:[
[
Function:format
],
[
Function:format
],
[
Function:format
],
[
Function:format
],
[
Function:format
],
[
Function:format
]
],
transformers:[
[
Function:transform
],
[
Function:transform
],
[
Function:transform
],
[
Function:transform
],
[
Function:transform
],
[
Function:transform
]
]
}
},
{
apply:[
Function:bound apply
]
},
ZopfliPlugin {
asset:'[path].gz[query]',
algorithm:[
Function
],
filename:false,
compressionOptions:{
verbose:false,
verbose_more:false,
numiterations:15,
blocksplitting:true,
blocksplittinglast:false,
blocksplittingmax:15
},
test:/\.(js|css|svg|ttf)$/,
threshold:1400,
minRatio:0.8,
deleteOriginalAssets:false
},
BrotliPlugin {
asset:'[path].br[query]',
test:/\.(js|css|svg|ttf)$/,
threshold:1400,
minRatio:0.8,
deleteOriginalAssets:false,
compress:[
Function
]
}
],
performance:{
hints:false
},
stats:{
hash:false,
version:false,
timings:false,
assets:false,
chunks:false,
maxModules:0,
modules:false,
reasons:false,
children:false,
source:false,
errors:false,
errorDetails:false,
warnings:false,
publicPath:false
},
resolve:{
extensions:[
'.js',
'.jsx',
'.vue',
'.ts',
'.tsx'
],
alias:{
}
},
externals:{
}
}
Также здесь представлены некоторые версии пакетов, которые могут быть интересны
@symfony/webpack-encore@0.20.1
node-sass@4.9.0
sass-loader@7.0.3
webpack@3.12.0
1 ответ
Вы можете использовать псевдонимы Webpack. Разрешение каждого импорта /templates к вашему проекту templates/ папка.
const path = require('path');
module.exports = {
// ...
resolve: {
alias: {
'/templates': path.resolve(__dirname, './templates')
}
}
};
Я читаю @sympony/webpack-encore и нашел addAliases установка. Вы можете использовать в качестве следующего примера.
const path = require('path');
const Encore = require('@symfony/webpack-encore');
Encore
// ...
.addAliases({
'/templates': path.resolve(__dirname, './templates')
});
В вашем Scss/SASS по импорту используйте ~ путь впереди файла.
@import '~/templates/common/variables'
- Ссылка на псевдоним Webpack
@symfony/webpack-encoreaddAliasesссылкаsass-loaderссылка на импорт
Возможно, вы уже нашли ответ самостоятельно, но на тот случай, если кто-то еще найдет здесь общий способ использования url() с путями, близкими к файлу, в который они импортируются, использует resol-url-loader. Также обратите внимание, что вы должны установить для sourceMap значение true в предыдущих загрузчиках.
https://www.npmjs.com/package/resolve-url-loader
Вот пример того, как его использовать:
{
// Note that sourceMap is needed to be true at least in sass-loader so resolve-url-loader works fine
test: /\.scss$/,
use: [
{
loader: "style-loader",
options: { sourceMap: true }
}, // Adds CSS to the DOM by injecting a <style> tag
{
loader: "css-loader",
options: { sourceMap: true }
}, // The css-loader interprets @import and url() like import/require() and will resolve them.
{
loader: "postcss-loader",
options: {
sourceMap: true,
plugins: [
require("autoprefixer")({ browsers: ["last 2 versions"] })
]
}
}, // Adds prefix for cross-browser support
{
loader: "resolve-url-loader",
options: { sourceMap: true }
}, // Webpack loader that resolves relative paths in url() statements based on the original source file.
{
loader: "sass-loader",
options: { sourceMap: true }
} // Loads a Sass/SCSS file and compiles it to CSS.
]
}
Я успешно использую абсолютный импорт с ~ и NODE_ENV, установленным в.env
/.env:
NODE_PATH=src/
учитывая, что /src/styles/variables.scss существует в любом файле.scss:
@import ~styles/variables`
отлично работает с CreateReactApp v2.0.
Ссылка: https://github.com/facebook/create-react-app/issues/4494#issuecomment-412113793