sass變量引入全局

https://www.jianshu.com/p/ab9ab999344b（copy）

 

本文以Sass做案例，Less的參考，基本配置大同小異。
假如我們有一個Sass的全局變量common.scss文件，路徑 ../style/common.scss 代碼如下:

@mixin t-button($color,$background) {
    color:$color; background:$background; padding:5px 10px; } 

現在我們想在一個vue文件里引用這個全局樣式，怎么辦呢？我們能按下邊的方法導入。

<style> @import '../style/common.scss'; button{ @include t-button(#fff,blue); } </style> 

但是這樣有一個問題，如果還有其他vue頁面也想用這個全局的common.scss文件，我們還需要在使用的vue頁面里再次按照上面的方法引入，那么問題來了，如果我更改了這個common.scss文件的路徑，那么每次我還要去修改所有的vue頁面里的common.scss文件文件路徑。有什么好的方法呢，讓我一次引入，所有的vue頁面均可以自動引用？
1.添加依賴

npm install sass-resources-loader --save-dev

在項目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文件運用全局的scss，而不需要在單獨引入。