本文以Sass做案例牡昆，Less的參考拇舀，基本配置大同小異烫扼。
假如我們有一個(gè)Sass的全局變量common.scss文件彤敛，路徑 ../style/common.scss 代碼如下:
@mixin t-button($color,$background) {
color:$color;
background:$background;
padding:5px 10px;
}
現(xiàn)在我們想在一個(gè)vue文件里引用這個(gè)全局樣式，怎么辦呢卖词？我們能按下邊的方法導(dǎo)入巩那。
<style>
@import '../style/common.scss';
button{
@include t-button(#fff,blue);
}
</style>
但是這樣有一個(gè)問題，如果還有其他vue頁面也想用這個(gè)全局的common.scss文件，我們還需要在使用的vue頁面里再次按照上面的方法引入拢操，那么問題來了，如果我更改了這個(gè)common.scss文件的路徑舶替，那么每次我還要去修改所有的vue頁面里的common.scss文件文件路徑令境。有什么好的方法呢，讓我一次引入顾瞪，所有的vue頁面均可以自動(dòng)引用舔庶？
1.添加依賴
npm install sass-resources-loader --save-dev
在項(xiàng)目build文件夾里找到utils.js ，定位到下邊代碼
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
把上面這句scss: generateLoaders('sass'),改成如下
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/css/all.scss')//這里按照你的文件路徑填寫
}
}
)
OK陈醒，完成惕橙，修改后的代碼是
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/css/all.scss')//這里按照你的文件路徑填寫
}
}
),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
這樣就可以在所有的scss文件或者vue文件運(yùn)用全局的scss，而不需要在單獨(dú)引入钉跷。
