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的版本原因还是怎样,在此记录一下