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