如何使用 Webpack 只导入一次 _global.scss 文件,而不是在每个 .scss 文件中导入?
How to import a _global.scss file with Webpack only once, and not in every single .scss file?
试图找到一种方法,用我的 webpack 构建一次导入一个 _.global.scss 文件,而不是在每个 .scss 文件中导入它(我每个组件都有一个 scss 文件)。
到目前为止我找到的唯一可能的解决方案是使用行李装载机,但我无法让它工作。
我的 webpack.config 中的加载程序如下所示:
loaders: [{
test: /\.scss$/,
loader: "style-loader!raw-loader!sass-loader"
+ "!baggage?"+ path.resolve(__dirname, "./src/_config/_global.scss")
}]
谢谢!
您可以创建一个自定义加载器,它将在您的所有 scss 文件中注入一条@import 语句。
这是一个 webpack.config.js 文件:
var path = require('path');
module.exports = {
entry: './src/app.js',
output: {
filename: 'build/bundle.js'
},
module: {
loaders: [
{
test: /\.scss$/,
exclude: /node_modules/,
loader: 'style!css!sass!' + path.resolve('loaders/inject-global-scss')
}
]
}
}
此代码片段假定您有一个加载程序文件夹,其中包含一个 inject-global-scss.js 文件。
这是此文件的内容:
module.exports = function(source) {
this.cacheable();
return `@import './src/_config/_global';
${source}`;
}
现在,我假设您在 src/_config 文件夹中有一个 _global.scss 文件。
由于字符串模板语法,您正在使用节点 5+。
试图找到一种方法,用我的 webpack 构建一次导入一个 _.global.scss 文件,而不是在每个 .scss 文件中导入它(我每个组件都有一个 scss 文件)。
到目前为止我找到的唯一可能的解决方案是使用行李装载机,但我无法让它工作。
我的 webpack.config 中的加载程序如下所示:
loaders: [{
test: /\.scss$/,
loader: "style-loader!raw-loader!sass-loader"
+ "!baggage?"+ path.resolve(__dirname, "./src/_config/_global.scss")
}]
谢谢!
您可以创建一个自定义加载器,它将在您的所有 scss 文件中注入一条@import 语句。
这是一个 webpack.config.js 文件:
var path = require('path');
module.exports = {
entry: './src/app.js',
output: {
filename: 'build/bundle.js'
},
module: {
loaders: [
{
test: /\.scss$/,
exclude: /node_modules/,
loader: 'style!css!sass!' + path.resolve('loaders/inject-global-scss')
}
]
}
}
此代码片段假定您有一个加载程序文件夹,其中包含一个 inject-global-scss.js 文件。
这是此文件的内容:
module.exports = function(source) {
this.cacheable();
return `@import './src/_config/_global';
${source}`;
}
现在,我假设您在 src/_config 文件夹中有一个 _global.scss 文件。 由于字符串模板语法,您正在使用节点 5+。