Vue 工程引入全局 SCSS

一，安装

安装 sass-loader 和 node-sass 插件

npm  install sass-loader --save-dev
npm install node-sass --sava-dev

二，配置

1. 新增一个 global.scss 文件作为样式变量管理文件。如颜色、字体大小等

2. 在 vue.config.js 中配置

   module.exports = {
       css: {
           loaderOptions: {
               scss: {
                   additionalData: `@import "~@/assets/styles/global.scss";` // 文件地址
               }
           }
       }
   }
   

   注意：由于 sass-loader 版本不同，loaderOptions 中的 additionalData 键名也不一样

   sass-loader v8-，这个键名是 data

   sass-loader v8 中，这个键名是 prependData

   sass-loader v10+，这个键名是 additionalData