VUE中的组件如何使用公共scss参数

安装scss

npm install scss scss-loader --save

新建公共scss文件

在mixin.scss中定义公共参数 

$acolor: #45b984;

在vue.config.js中进行配置

官方文档：

module.exports = {
    publicPath: './',
    css: {
        loaderOptions: {
          // 给 sass-loader 传递选项
          sass: {
            // @/ 是 src/ 的别名
            // 所以这里假设你有 `src/variables.sass` 这个文件
            // 注意：在 sass-loader v7 中，这个选项名是 "data"
            prependData: `@import "~@/variables.sass"`
          },
          // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
          // 因为 `scss` 语法在内部也是由 sass-loader 处理的
          // 但是在配置 `data` 选项的时候
          // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
          // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
          scss: {
            prependData: `@import "~@/assets/css/mixin.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'
            }
          }
        }
      }
}

然后在任意地方的组件中都可以直接使用mixin.scss中定义的参数