Monorepo遗留包场景：如何让Vite将所有.scss视为CSS Modules？

可以通过配置Vite的css.modules规则实现需求，具体配置如下：

• 在项目根目录的vite.config.js（或vite.config.ts）中，添加或修改css配置项，通过include正则指定所有.scss文件都按CSS Modules处理：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  css: {
    modules: {
      // 匹配所有 .scss 文件，启用 CSS Modules 编译
      include: /\.scss$/,
      // 可选：自定义类名生成格式，默认格式为 [hash:base64]
      // generateScopedName: '[name]__[local]___[hash:base64:5]',
    },
  },
  optimizeDeps: {
    // 保留你已配置的遗留包
    include: ['your-legacy-package-name'],
  },
})

如果不想全局启用，只想针对遗留包内的.scss文件生效，可以把include规则改为匹配遗留包的路径：

modules: {
  include: /\/your-legacy-package\/.*\.scss$/
}

配置完成后，Vite会将目标.scss文件编译为CSS Modules，import styles from './EditableField.scss'语句就能正确获取样式对象，解决“does not provide an export named 'default'”的错误。

内容的提问来源于stack exchange，提问作者JaKXz