如何在create-react-app中使用css模块？

Question

根据Dan Abramov的tweet，CSS模块支持在create-react-app（CRA）中。只需要将module.css扩展到他的样式表以启用该功能，但这不适用于我。我有react-scripts版本1.1.4。如何使用CRA启用css模块？谢谢

Answer 1

您不需要弹出。

Create-React-App从版本2开始就支持css模块，现在它已经稳定了。

通过运行v2 (react-scripts@latest)升级到yarn upgrade react-scripts@latest。

您只需要创建一个扩展名为.module.css的文件

例如：

.myStyle {
  color: #fff
}

然后你可以像这样使用它：

import React from 'react'
import styles from 'mycssmodule.module.css'

export default () => <div className={styles.myStyle}>We are styled!</div>

Answer 2

要在您的应用程序中启用CSS模块，您无需弹出create-react-app。您可以按照this link中描述的这些简单步骤在项目中使用CSS模块。

但是如果您弹出了create-react-app，那么您必须找到名为的文件

“webpack.config.js”

打开这个文件，在行号中找到{test：cssRegex .... etc}。 391并替换为此更改：

            {
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
              importLoaders: 1,
              modules: true,
              localIdentName: '[name]__[local]__[hash:base64:5]'
            }),
            },

像这样打开.js文件和import语句

import cssStyleClassName from './MyApp.css';

然后，此import语句允许您在组件标记中执行以下更改

<div className={cssStyleClassName.styleName}></div>

styleName是您在MyAppStyle.css文件中定义的

.styleName{
your properties here...
}

弹出应用程序后，必须重新启动本地服务器，有时更改不会反映出来。

注意在早期版本中，有两个生成的文件用于生产和dev分开。现在，在当前版本中，您需要关注一个名为“webpack.config.js”文件的文件。谢谢。

Answer 3

您需要弹出create-react-app然后在webpack的配置文件中添加这两行

并使用它加载css到组件你不想（我关键组件和它的css在同一个文件夹中）

import classes from './SomeComponentStyle.css';

...

<div className={classes.RedDiv}>

在SomeComponentStyle.css中

.RedDiv {
  /* styles for red div */
}