vite.config.ts中配置并全局加载scss的问题!

[xjzhanghw]

vite+vue项目中，在vue文件里引入并使用sass中定义的变量；
例如：styles/variables.module.scss文件内容如下：

$iname: 'vite2sass' ;
$level:12;
 
:export {
  iname:$iname;
  level:$level;
}

若在vue文件中去使用该sass文件定义的变量：
1、在style中引入:
@import '[@/styles/variables.module.scss']();
2、在script中引入:
注：在script中引入scss时，scss的文件名改成了<文件名>.module.scss

import variables from '@/styles/variables.module.scss'
console.log(variables.iname)

这样就可以同时在script和style中引入后使用了。

但是vite.config.ts中可以全局加载scss文件，配置如下：

css: {
      /* CSS 预处理器 */
      preprocessorOptions: {
        scss: {
          additionalData: `@use "src/styles/variables.module.scss" as *;@use "src/styles/test.module.scss" as *;`
        }
      }
}, 

这样配置后，在vue文件的style中不需要使用@import引入，就可以直接使用scss中定义的变量。
但是，在vue的script块中是无法直接使用scss里定义的变量的。此时，在script中加入：
import variables from '@/styles/variables.module.scss'
执行就会报如下错误：“模块已经被加载”。

**[vite] Internal server error: Module loop: this module is already being loaded.**

请教：
如何在vite.config中统一配置并全局加载，以达到在vue的script和style块中都可以直接使用scss里定义的变量呢？
感谢指点！

我的系统信息如下：

System:
OS: Windows 10 10.0.19044
CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
Memory: 7.66 GB / 15.91 GB
Binaries:
Node: 16.13.2 - C:\nodejs\node.EXE
Yarn: 1.22.17 - C:\nodejs\node_global\yarn.CMD
npm: 8.4.0 - C:\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (99.0.1150.39)
Internet Explorer: 11.0.19041.1566
npmPackages:
[@vitejs/plugin-vue: ]()^2.2.0 => 2.2.4
vite: ^2.8.0 => 2.8.6 

[ssaishandsome]

这个问题解决了吗？