如何在 React 上设置 CSS 模块？答案

【问题标题】：How do I set CSS Modules on React?如何在 React 上设置 CSS 模块？
【发布时间】：2020-05-07 01:07:11
【问题描述】：

我想在React 研究项目中首次设置css-modules。

我了解到，在react-app +2 上，我不需要eject 就可以让css-modules 运行。我尝试在this link 中学习该过程但没有成功，因为css-modules set up 已从文档中消失。

我使用 webstorm 创建了一个react 项目。我也找不到我的 webpack.config.js 文件。

能否再解释一下我如何在我的项目上进行这项工作？

我尝试了以下方法：

App.js 文件

import React, {Component} from 'react';
import classes from './App.css';
import UserOutput from './Components/UserOutput/userOutput'

//...code in between

 return (
            <div className={classes.App}> //I have tested this, but it does not work
                <h1>This is a ReactJs exercise App!</h1>
                <h2 className={assignedClasses.join(' ')}>Cool Cards are being displayed below</h2>
                {types}
                <br/>
                <button className={btnClasses.join(' ')} onClick={this.hideComponentHandler}>V-if in React</button>
            </div>
        )

App.css 文件

.App {
  margin: 10px;
  padding: 10px;
  text-align: center;
}

【问题讨论】：

create-react-app.dev/docs/adding-a-css-modules-stylesheet（简而言之，添加.module.css 来指定一个css模块导入——没有.module，它只是一个全局css导入）。

标签： reactjs react-css-modules

【解决方案1】：

尝试将文件名从 App.css 更改为 App.module.css

【讨论】：