vue项目设置共享全局样式变量

参考: vue cli - 向预处理器 Loader 传递选项

当我们需要在组件中使⽤某个css文件(比如 variable.scss )中定义的变量时，需要先引⼊⽂件，然后才能访问变量，如果每个组件都要使⽤的话就可以通过共享访问。

共享访问可以使用 vue.config.js 中的 css.loaderOptions 选项

示例代码:

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.sass` 这个文件
        // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
        additionalData: `@import "~@/variables.sass"`
      },
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `prependData` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      scss: {
        additionalData: `@import "~@/variables.scss";`
      },
      // 给 less-loader 传递 Less.js 相关选项
      less:{
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `primary` is global variables fields name
        globalVars: {
          primary: '#fff'
        }
      }
    }
  }
}

步骤:

1. 首先在根目录创建一个vue.config.js的文件.

2. 将上面的代码复制到新建的文件中, 删掉不需要的部分.

这里需要注意一下: 在 sass-loader v8 中，这个选项名是 prependData 而不是additionalData.

我们可以通过package.json 查看当前项目的sass-loader的版本, 大于8时使用prependData

• ~@ 代表 src/, 即 src ⽬录

3. 修改路径.

4. App.vue中写一些css样式进行测试就可以了