vue.config.js 中 全局 scss 使用如下配置
scss 相关各种版本及具体配置，详见node node-sass sass-loader 版本对应，此文下面也有对本文的内容，本文只是提出来单独记忆。本文只针对，scss 环境已配置好，引入全局 scss 没报错但不生效的情况。
module.exports = {
css: {
loaderOptions: {
scss: {
// 全局sass变量
//sass-loader 8.0.0以前版本 , v8 - prependData, v10+ - additionalData
additionalData : `@import "~@/assets/scss/index.scss";`
},
sass: {
// 全局sass变量
//sass-loader 8.0.0以前版本 , v8 - prependData, v10+ - additionalData
additionalData: `@import "~@/assets/scss/index.scss";`
}
},
},
}
如果其中不只有变量文件，还引入了全局样式，且没有在 main.js 中引入 全局样式，且所有单 vue 文件中没有全局 scss 样式，则全局样式在没有 scss 内容的 vue 文件中不生效。
- 上面
vue.config.js中配置的全局引入scss，会在每个使用 scss 的 vue 组件中引入。因此，此处适合配置全局变量和mixin之类，单纯的全局样式，不建议在此处引入。如果执意在此处引入全局样式，有的 vue 文件中没有 style 样式标签，想要全局样式在此处生效，需要 vue 文件中写一个<style lang="scss">中间必须有内容 </style>（猜测因为配置文件是在每个 vue 文件单独引入的原因）。 -
全局样式 scss，在
vue-cli4 + webpack 4.x项目的main.js中，引入不报错，但也不生效（暂时没找到原因）。在vue-cli5 + webpack5.x项目的main.js中，引入生效。保险起见，在app.vue中全局引入最好。
-引入 scss 文件时，使用@import url('xxx.scss')语法，会被解析为 css 文件，里面的变量不会生效。应使用@import 'xxx.scss'
