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

Question

根据Dan Abramov 的推文,CSS模块支持在create-react-app(CRA)中.只需要扩展module.css他的样式表来启用该功能,但这不适用于我.我的版本是1.1.4 react-scripts.如何使用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。您可以按照此链接中描述的这些简单步骤在项目中使用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 cssStyleClassName from './MyApp.css';

然后，此import语句使您可以像这样在组件标签中进行以下更改

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

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

.styleName{
your properties here...
}

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

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