如何在create-react-app中使用CSS模块？ [英] How to use css modules with create-react-app?

问题描述

Dan Abramov的 tweet 中说，CSS模块支持create-react-应用（CRA）。只需要将 module.css 的扩展名添加到他的样式表即可启用该功能，但这对我不起作用。我正在使用 react-scripts 的1.1.4版本。如何使用CRA启用CSS模块？谢谢

According to a tweet by Dan Abramov, CSS modules support is there in create-react-app (CRA). One just needs to give extension of module.css to his stylesheets to enable the feature, but this is not working with me. I am having version 1.1.4 of react-scripts. How can I enable css modules with CRA? Thanks

推荐答案

您不需要弹出。

创建React App支持CSS模块从版本2开始就立即可用，现在已稳定。

Create React App supports CSS Modules right out of the box as of version 2, which is now stable.

升级到第2版（ react-scripts @ latest ），通过运行 yarn upgrade react-scripts @最新或 npm安装--save react-scripts @ latest 。

您只需创建一个扩展名为 .module.css

You just have to create a file with the extension .module.css

例如：

.myStyle {
  color: #fff
}

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

Then you can use it like so:

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

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

这篇关于如何在create-react-app中使用CSS模块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！