使用vite+vue时遇到个关于css module的刁钻问题，期待大牛来解答事情的起因是这样的，有个老项目用ruoyi

起因

事情的起因是这样的，公司有个老项目，用ruoyi-vue创建的，底层是vue-cli脚手架，每次启动比较慢，就想把开发环境改成vite，方便开发时快速启服务。

问题

在改造项目时，遇到一个vue组件使用了 css module 导出变量的语法。由于不想把文件名从 .scss 改为 .module.scss，所以自然而然把代码改为了 import variables from './variables.scss?module',试了几次发现没生效啊......

按理说，这情况不会出现啊，我记得vite是支持这样写的，怎么现在又不支持了。

实践是检验真理的唯一标准，启个服务验证一下，于是有了下面的代码：

创建a1.css 文件:

.home {
  background-color: #ff0000;
}

:export {
  color: #ff0000;
}

创建 a2.scss 文件：

$baseColor: #ff0000;

.home {
  background-color: $baseColor;
}

:export {
  color: $baseColor;
}

创建 a3.module.css 文件：

.home {
  background-color: #ff0000;
}

:export {
  color: #ff0000
}

创建 a4.module.scss 文件：

$baseColor: #ff0000;

.home {
  background-color: $baseColor;
}

:export {
  color: $baseColor
}

在 App.vue 组件中写：

<template>
  <div id="app">
    <div>test</div>
  </div>
</template>

<script setup>
import a1 from '@/assets/scss/a1.css?module';
import a2 from '@/assets/scss/a2.scss?module';

import a3 from '@/assets/scss/a3.module.css';
import a4 from '@/assets/scss/a4.module.scss';

console.log('a1', a1);
console.log('a1.home', a1.home);
console.log('a1.color', a1.color);

console.log('a2', a2);

console.log('a3', a3);
console.log('a4', a4);
</script>

执行结果如下：

这就说明用查询参数导入 css module 的语法无效了。顺便问了问AI，AI回答如下：

AI说vite是原生支持此类语法的。

我记得几年前改另外一个项目时，也用过这种语法，为什么失效了呢？

哪位大神可以解答在下的问题，没有重谢，可以一起吃饭喝酒。

后记

顺便，希望认识一些喜欢钻研的朋友，探讨交流。

四不要：

不要跟我说技术没前途，丑拒。
不要跟我说技术不值钱，丑拒。
不要跟我说技术会失业，丑拒。
不要跟我传播制造焦虑，丑拒。

五欢迎：

欢迎积极向上。
欢迎文明友善。
欢迎技术探讨。
欢迎创业交流。
欢迎（）。