vue-cli3/cli4 vue.config.js 中全局引入 scss 样式不生效 解决方案

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'