sass變量引入全局

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，而不須要在單獨引入。