vite中配置react-css-modules

要在 Vite 中为 React 项目配置 react-css-modules，可以按照以下步骤操作：

1. 安装 `react-css-modules` 和 `sass`（或其他 CSS 预处理器）

   npm install react-css-modules sass --save-dev

2. 在 `vite.config.js` 中添加以下配置：

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

   export default defineConfig({
     plugins: [reactRefresh()],
     css: {
       preprocessorOptions: {
         scss: {
           additionalData: `@import "@/styles/variables.scss";`,
         },
       },
     },
     esbuild: {
       jsxInject: `import React from 'react';`,
     },
   });

其中：

- `css.preprocessorOptions.scss.additionalData` 是为了在每个 `.scss` 文件中自动引入变量文件。
- `esbuild.jsxInject` 是为了让 JSX 代码中自动引入 React。

3. 在需要使用 CSS modules 的组件文件中使用 `react-css-modules`，并将样式文件的后缀名改为 `.module.scss` 或 `.module.css`。

   import React from 'react';
   import styles from './styles.module.scss';

   function MyComponent() {
     return <div styleName="my-style">Hello, world!</div>;
   }

   export default React.CSSModules(MyComponent, styles);

在这个例子中，`styles` 对象包含了 `styles.module.scss` 中定义的所有 CSS 类名，可以像 `styleName="my-style"` 这样使用。注意，在使用 `react-css-modules` 的时候，我们将组件作为第一个参数传入了 `React.CSSModules()` 函数中，并将 `styles` 作为第二个参数传入。