react项目vite配合css模块化

在 项目中使用 Vite 和 CSS 模块化的步骤如下：

1. 安装 Vite

在命令行工具中执行以下命令：

npm install vite --save-dev

2. 配置 Vite

在项目根目录下创建 `vite.config.js` 文件，并添加以下内容：

module.exports = {
  css: {
    modules: true
  }
}

这样就开启了 CSS 模块化。

3. 编写 React 组件

在 React 组件中使用 CSS 模块化非常简单，只需要在 CSS 文件中添加 `:local` 伪类即可。例如：

.title :local(.text) {
  color: red;
}

在 React 组件中引入 CSS 文件时，需要使用 `import` 语句，并将样式赋值给组件的 `className` 属性。例如：

import styles from './styles.css';

function MyComponent() {
  return (
    <div className={styles.title}>
      <span className={styles.text}>Hello, World!</span>
    </div>
  );
}

这样就可以使用 CSS 模块化了。注意，`styles.title` 和 `styles.text` 是自动生成的类名，可以通过 `console.log(styles)` 查看。