react-css-modules干嘛的

react-css-modules 是一个 React 应用程序中的 CSS 样式模块化解决方案。它可以让你使用 CSS 模块化编写样式，并且在组件化开发的过程中避免选择器冲突的问题。它也提供了一种方便的方式来将样式与组件相关联，因此你可以轻松地在组件层面上管理和组织样式。使用 react-css-modules，你可以在 React 组件中使用 CSS 样式，并且不必担心全局 CSS 样式的污染问题。

相关问题

react-css-modules怎么配置

使用 `react-css-modules` 需要进行以下配置：

首先安装依赖包：

npm install react-css-modules --save
npm install babel-plugin-transform-decorators-legacy --save-dev

在 babel 配置文件 `.babelrc` 中添加 `transform-decorators-legacy` 插件：

{
  "plugins": [
    "transform-decorators-legacy"
  ]
}

在 webpack 配置文件中添加 `css-loader`：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

然后在组件中使用 `react-css-modules`：

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './MyComponent.css';

class MyComponent extends React.Component {
  render() {
    return (
      <div styleName="container">
        <h1 styleName="title">Hello, World!</h1>
      </div>
    );
  }
}

export default CSSModules(MyComponent, styles);

在上面的示例中，`styles` 是一个对象，其中包含了组件的样式。`styleName` 属性用于指定样式的名称，它会自动从 `styles` 对象中查找对应的样式。

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` 作为第二个参数传入。