vitejs 将所有 .scss 文件视为 css 模块

Question

我正在 monorepo 中使用旧包，并且 包括在 optimizationDeps 数组中 - 是否可以告诉 Vite 将其看到的所有 .scss 文件视为 CSS 模块文件？

最初在vite不和谐中询问：https://discord.com/channels/804011606160703521/1217522070343254016

问题是这个旧包的所有 css 模块文件都是普通的

.scss

文件，而不是 vite 期望的

.module.scss

，所以我看到这个错误：

The requested module '/@fs/Users/jakxz/go/src/.../components/fields/EditableField/EditableField.scss' does not provide an export named 'default''

EditableField.js

是一个已编译的 ESM React 组件，尝试执行以下操作

import styles from './EditableField.scss';

Answer 1

在你的 vite.config.js 中

export default { css: { preprocessorOptions: { scss: { modules: true } } } }

这将确保Vite将所有.scss文件解释为CSS模块

Answer 2

通过如下配置 vite.config.js 文件，所有 .scss 文件将被视为 CSS 模块文件，无论其文件扩展名如何：

// vite.config.js
export default {
  optimizeDeps: {
    include: ['**/*.scss'], // Include all .scss files
  },
  css: {
    modules: {
      // Enable CSS Modules for all .scss files
      localsConvention: 'camelCaseOnly',
    },
  },
};