背景:sass的mixin与全局变量文件需在多处引入十分麻烦,可以通过
sass-resources-loader
达到全局注入,终身受益的目的。
scss目录
安装
npm i sass-resources-loader --save -dev
配置
在build/utils.js
文件的exports.cssLoaders
函数内添加如下代码:
exports.cssLoaders = function (options) {
// ...
function generateSassResourceLoader () {
var loaders = [
cssLoader,
postcssLoader, px2remLoader, // 若需要则加上这一行,不用就不加
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname, '../src/common/scss/variable.scss'),
path.resolve(__dirname, '../src/common/scss/mixins.scss')
]
}
}
]
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// ...
return {
// ...
sass: generateSassResourceLoader(), // 替换原来的,下同
scss: generateSassResourceLoader(),
// ...
}
}
注意事项
1.千万不要全局注入app.scss
这种全局样式文件,它会重复编译多次
2.如果需要引用lib-flexible
,则需要在loader里添加px2remLoader
,否则px不会自动转rem