vue3 + vite SCSS MODULES 失效

### Vue3 和 Vite 项目中 SCSS Modules 失效的解决方案 在 Vue3 和 Vite 项目中，SCSS Modules 失效可能由多种原因引起。以下是可能导致问题的原因及解决方法： #### 1. 文件命名是否符合规范 SCSS Modules 要求样式文件必须以 `.module.scss` 的形式命名。如果文件名不符合此约定，则不会被视为模块化样式文件[^1]。 ```scss /* 正确的文件名 */ styles.module.scss ``` #### 2. 样式导入方式是否正确 在使用 SCSS Modules 时，需要确保样式文件通过模块导入的方式引入。例如，在 Vue 组件中，应如下导入： ```javascript <script setup lang="ts"> import styles from './styles.module.scss'; </script> <template> <button :class="styles.button">Click Me</button> </template> ``` 如果直接使用 `import './styles.module.scss';` 的方式，则不会应用 SCSS Modules 的作用域规则[^3]。 #### 3. Vite 配置是否正确 确保 Vite 配置文件已正确设置以支持 SCSS Modules。以下是一个典型的 Vite 配置示例： ```typescript // vite.config.ts export default ({ command, mode }: ConfigEnv): UserConfig => { return { css: { preprocessorOptions: { scss: { additionalData: '@import "./src/styles/variables.scss";', // 引入全局变量 }, }, modules: { localsConvention: 'camelCase', // 设置类名转换为驼峰命名 generateScopedName: '[name]__[local]___[hash:base64:5]', // 自定义生成的类名格式 }, }, plugins: [...], }; }; ``` 上述配置明确启用了 SCSS Modules，并自定义了类名生成规则[^1]。 #### 4. Vue 单文件组件 (SFC) 中的 `style` 块属性 在 Vue 单文件组件中，如果直接在 `<style>` 块中编写样式，则默认是全局样式。为了启用 SCSS Modules，需要添加 `module` 属性，并指定语言类型为 `scss`： ```vue <style module lang="scss"> .button { background-color: blue; color: white; padding: 10px; border: none; } </style> ``` 然后在模板中使用绑定语法访问类名： ```vue <template> <button :class="$style.button">Click Me</button> </template> ``` 此处 `$style` 是 Vue SFC 中自动注入的对象，用于访问模块化的类名[^2]。 #### 5. 检查输出结果 可以通过检查生成的 HTML 和 CSS 文件，确认类名是否被正确替换为模块化的唯一标识符。例如，原始类名 `button` 可能会被替换为类似 `Button_button__3dXkL` 的格式[^1]。 --- ### 示例代码 以下是一个完整的示例，展示如何在 Vue3 和 Vite 项目中正确使用 SCSS Modules： #### 样式文件 (`styles.module.scss`) ```scss .button { background-color: $primary-color; color: white; padding: 10px; border: none; } ``` #### Vue 组件 (`App.vue`) ```vue <script setup lang="ts"> import styles from './styles.module.scss'; </script> <template> <button :class="styles.button">Click Me</button> </template> ``` 或者直接在 `<style>` 块中启用模块化： ```vue <template> <button :class="$style.button">Click Me</button> </template> <style module lang="scss"> .button { background-color: $primary-color; color: white; padding: 10px; border: none; } </style> ``` --- ###