vue2 + scss 全局引入 变量使用

百度以及时AI帮助说的配置方式都大差不差,但是我的总是报错,意思就是变量找不到,报错如下

For a guide and recipes on how to configure / customize this project,<br>

 然后AI和文章写的vue.config.js的配置内容基本如下

   module.exports = {
     css: {
       loaderOptions: {
         scss: {
           additionalData: `@import "@/styles/variables.scss";`
         }
       }
     }
   };

或者就是这样各种吧

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "~@/assets/common/common.scss";`
        // prependData:  `@import "@/src/assets/common/common.scss";`
      }
      // sass: {
      //   additionalData: `@import "@/src/assets/common/common.scss";`,
      //   prependData:  `@import "@/src/assets/common/common.scss";`
      // }
    }
  }
})

但都是报错找不到变量,直到看到一篇文章的写法是这样的

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  css: {
    loaderOptions: {
      scss: {
        // additionalData: `@import "~@/assets/common/common.scss";`
        data: `@import "@/assets/common/common.scss";`
        // prependData:  `@import "@/src/assets/common/common.scss";`
      }
      // sass: {
      //   additionalData: `@import "@/src/assets/common/common.scss";`,
      //   prependData:  `@import "@/src/assets/common/common.scss";`
      // }
    }
  }
})

就是用的data属性,就可以了

也不知道是因为vue或者node或者npm或者webpack的版本原因还是怎样,在此记录一下

---------------------------------------------------------------------------------------------------------------------------------

sass-loader 包根据版本不同,有如下属性变化

刚又搜了一个,一共有三种属性

 data(版本8以下)

prependData(版本8)

additionalData(版本8以上)

如果报错,可以这三个轮换着试一试,如果还不行,可能就是你的scss文件路径写错了