当项目越来越大的时候,便于后期维护和代码的编写效率 提取css是必须的 但是每个页面都又可能用到全局声明的 scss变量 每个页面引入? 显然不是程序猿的作风,
于是 sass-resources-loader 闪亮登场
第一步: cnpm install sass-resources-loader --D
第二步: 找到vue.config.js , 找到chainWebpack选项
第三步:
// vue.config.js
module.exports = {
chainWebpack: config => {
const oneOfsMap = config.module.rule('scss').oneOfs.store
oneOfsMap.forEach(item => {
item
.use('sass-resources-loader')
.loader('sass-resources-loader')
.options({
// Provide path to the file with resources
resources: './path/to/resources.scss',
// Or array of paths
resources: ['./path/to/vars.scss', './path/to/mixins.scss']
})
.end()
})
}
}