vue-cli3.0+ 全局使用 scss预处理器 scss的全局变量_vue-cli scss 全局变量

提示 ：首先用vue-cli 搭建框架时，要选择安装配置 sass/scss
定义variables.scss全局的scss文件
例如：定义

// 全局变量
$g-app-bg: #fff; // 应用背景色
$z_bg:#409eff; //主题背景色
$head_color:#fff; //头部字体颜色
$red:red
1
2
3
4
5

使用：

body {
  width: 100%;
  height: 100%;
  margin: 0;
  color: #333;
  background-color: $g-app-bg;
  box-sizing: border-box;
  font-family: Lato, PingFang SC, Microsoft YaHei, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
1
2
3
4
5
6
7
8
9
10

设置全局的 scss 变量 vue.config.js
注意事项：
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";
},

module.exports = {
  css: {
    // 配置全局的scss样式
    loaderOptions: {
       scss: {
        prependData: `@import "~@/assets/styles/variables.scss";`
      },
    }
  }
}
1
2
3
4
5
6
7
8
9
10

附带的package.json

"dependencies": {
    "core-js": "^3.6.5",
    "element-ui": "^2.15.1",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

最后附加一句，设置全局的scss 方式好几个，这只是其中一种方式，有兴趣的可以拿去借鉴~