Vue中使用Sass全局变量

Z时代
2024-01-10
分类：综合

vue

前言

假设我们原有项目的主题色是蓝色的，这时有个需求，需要把主题色改成橙色的。一般情况下，我们可能会在main.js中引入公共样式文件，但你会发现，在组件中使用公共样式文件中定义的某个参数时，会报一个错误："变量未定义"。

那还有一种写法是，在每个组件中都引入公共样式(注：需要用到公共样式的组件)，但这样写，感觉代码会很不perfect 。

那有没有什么办法，只要公共样式引入一次，即可在全部组件中使用呢？

方法一：使用sass-resources-loader解决Sass全局变量问题

sass-resources-loader可以访问sass资源任何一个需要访问的sass模块。所以，可以使用共享变量和混合所有SASS样式，而不去每个文件都引用。

1.安装sass-resources-loader

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

2.相关配置

在build文件夹下，找到util.js文件，然后配置相关代码。首先新增两个函数：

//简化路径
  function resolveResource(name){
    return path.resolve(__dirname,'../static/css/'+name)
  }
  function generateSassResourceLoader(){
    var loaders = [
      cssLoader,
      'sass-loader',
      {
        loader: 'sass-resources-loader',
        options: {
          // 多个文件时用数组的形式传入，单个文件时可以直接使用 path.resolve(__dirname, '../src/init.scss'
          resources: [resolveResource('init.scss')]  
        }
      }
    ]
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

然后在util.js文件中找到下面的代码，把“generateSassResourceLoader”方法替换到sass和scss属性中，代码如下(注释掉那一句是默认代码)：

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    // sass: generateLoaders('sass', { indentedSyntax: true }),
    sass:generateSassResourceLoader(),//引用上面的配置方法
    scss: generateSassResourceLoader(),//引用上面的配置方法
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

配置完后，重新启动一下项目，就可以在其它组件中使用全局变量了。

方法二：使用vue-cli 3

在vue.config.js文件中配置css.loaderOptions 选项，这边就直接贴官网上的代码了，官网地址：灰机直达

引入多个的话，在data属性中，分号后面直接添加即可。

sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.scss` 这个文件
        data: `
                 @import "~@/variables.scss";
                 @import "~@/test.scss";
              `
}