sass变量引入全局

Posted 2022-04-07 wang-sai-sai

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