如何在 React 16.13.1 中启用 CSS 模块？

Posted 2023-02-21

【中文标题】如何在 React 16.13.1 中启用 CSS 模块？

【英文标题】：How can I enable CSS Modules in React 16.13.1?

【发布时间】：2020-09-17 16:28:17

【问题描述】：

大家！我正在尝试观看教程并阅读有关如何在 React 16.13.1 中启用 CSS 模块的文章。我知道要做到这一点，我必须运行“npm runeject”，我已经这样做了。接下来，我知道我必须编辑“webpack.config.js”文件。但是，我的 webpack.config.js 文件看起来和网上的很不一样。下面是我的 webpack.config.js 文件的 sn-p，那么我必须添加哪些行以及在哪里启用 CSS 模块？如果您需要更多信息，请告诉我。

test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders(
  importLoaders: 1,
  sourceMap: isEnvProduction && shouldUseSourceMap,
),

【问题讨论】：

CSS 模块应该可以在不运行弹出的情况下工作吗？

@Vivek 检查，这可能会对您有所帮助***.com/questions/50234890/…

【参考方案1】：

将您的文件命名为 styles.module.css 适用于 CRA

【参考方案2】：

例如你在与js文件相同的文件夹中创建一个css文件：

MyComponent.模块.css

.Mycomponent 
    padding: 10px; 
    margin: 5px;

MyComponent.js

import React from 'react';
import classes from "./MyComponent.module.css";

const MyComponent = () => 
    return (
        <div className=classes.Mycomponent>
            This div needs some padding and margin
        </div>
    )


export default MyComponent