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

【问题标题】：How can I enable CSS Modules in React 16.13.1?如何在 React 16.13.1 中启用 CSS 模块？
【发布时间】：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 检查，这可能会对您有所帮助stackoverflow.com/questions/50234890/…

标签： javascript css reactjs webpack react-css-modules

【解决方案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

【讨论】：