vue 设置全局变量的颜色_在vue应用程序中全局定义颜色变量

版本 vue cli 2.6.0

方式1：

在工程根目录下，创建 vue.config.js

内容如下：

module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // 所以这里假设你有 `src/variables.scss` 这个文件
        data: `@import "@/style/variables.scss";`
      }
    }
  }
}

variable.scss 内容

// 颜色
$color-red:red;
$color-yellow: yellow;
$color-white: white;
$color-light-gray: #F5F5F5;
$c-side-deep:#1f2d3d;
 
// 文字
 
 
// 其他

使用：

color: $color-white;

方式2：

不使用vue.config.js，直接再APP.vue 中引入 variable.scss