一斩启、背景
在寫 vue 的時(shí)候，如果使用 sass 編寫醉锅，需要用到全局變量兔簇、混合、公共函數(shù)的話硬耍，就要每個(gè)組件 @import 導(dǎo)入垄琐；
如果變量文件位置有改動(dòng)的話，就得所有的引用都改動(dòng)经柴，所以就需要一種配置了變量狸窘，全局都可以使用的方式。
我們?cè)谶@里使用 sass-resources-loader 作為解決方案坯认。
二翻擒、介紹
sass-resources-loader 會(huì)將指定的 sass 文件引入到每個(gè)使用 sass 模塊的文件中，減去用戶自身引用的繁瑣操作牛哺；
而且當(dāng)公共文件的路徑發(fā)生改變的時(shí)候陋气，只需在配置的一處地方跟隨修改即可，無需多處修改引润；
三巩趁、配置
下面分享下如何在 vue-cli 工程里配置：
- 使用
vue-cli創(chuàng)建的工程內(nèi)都有一個(gè)叫build的文件夾，在這里面主要放置的是webpack配置淳附，打開文件夾议慰，找到utils.js文件并打開。
codepng1.png
2.在cssLoaders函數(shù)中的return前面加上
// =========
// SASS 配置
// =========
function resolveResouce(name) {
// 此處路徑為存放全局 sass 文件的文件夾路徑
return path.resolve(__dirname, '../src/assets/sass/' + name);
}
function generateSassResourceLoader() {
var loaders = [
cssLoader,
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
// it need a absolute path
resources: [resolveResouce('_variable.scss')] // 此處填寫需要配置為全局文件的sass文件
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
- 再將下方 return 的對(duì)象修改成這樣：
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
// sass: generateLoaders('sass', { indentedSyntax: true }), // 將這兩個(gè)替換成上面加上的函數(shù)
// scss: generateLoaders('sass'),
sass: generateSassResourceLoader(),
scss: generateSassResourceLoader(),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
配置完成奴曙！
