sass变量引入全局

本文以Sass作案例，Less的参考，基本配置大同小异。
假如咱们有一个Sass的全局变量common.scss文件，路径 ../style/common.scss 代码以下:vue

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

如今咱们想在一个vue文件里引用这个全局样式，怎么办呢？咱们能按下边的方法导入。java

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

可是这样有一个问题，若是还有其余vue页面也想用这个全局的common.scss文件，咱们还须要在使用的vue页面里再次按照上面的方法引入，那么问题来了，若是我更改了这个common.scss文件的路径，那么每次我还要去修改全部的vue页面里的common.scss文件文件路径。有什么好的方法呢，让我一次引入，全部的vue页面都可以自动引用？
1.添加依赖npm

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

在项目build文件夹里找到utils.js ，定位到下边代码sass

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'),改为以下ruby

scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/assets/css/all.scss')//这里按照你的文件路径填写 } } ) 

OK，完成，修改后的代码是less

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，而不须要在单独引入。post