scss additionalData Can‘t find stylesheet to import

scss导入全局变量文件报找不到样式

additionalData Can't find stylesheet to import

或是提示没有定义变量

additionalData Module build failed Undefined variable $--theme-color

我的是配置问题，路径写得不对，文件是 src 目录下的 theme.scss，错误写法：

additionalData: `@import "./theme.scss";`

additionalData: `@import "./src/theme.scss";`

正确写法：vue.config.js

module.exports = defineConfig({css: {loaderOptions: {scss: {additionalData: `@import "~@/theme.scss";`}}}
})

下面写法也可以

 additionalData: `@import "@/theme.scss";`

additionalData: `@import "~/src/theme.scss";`

theme.scss

/* 改变主题色变量 */
$--theme-color: #e61111;

然后 vue 文件 color: $--theme-color; 引用即可。