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

52
根据 Dan Abramov 的推文,create-react-app(CRA)支持 CSS 模块。只需要将样式表的扩展名更改为 module.css 以启用此功能,但这对我不起作用。我使用的是 react-scripts 版本1.1.4。我该如何在 CRA 中启用 css 模块?谢谢。

2
它仅在 cra v2 上可用。请参见 https://github.com/facebook/create-react-app/pull/2285 - Roy Wang
你成功解决了如何在Firebase上正确显示应用程序的问题吗?即使我上传了新的构建版本,使用“yarn upgrade react-scripts@latest”命令也没有改变结果。 - loekTheDreamer
1
几乎每个答案都是:“没问题,让我们先通过弹出 cra 来解决它。” 真的吗? - Welcor
11个回答

0

标题 ## 我使用的是 react-script 版本 3.4.3(最新版本)。您只需要按照以下步骤操作。

运行命令:npm run eject

然后您将获得一个配置文件,在其中打开 webpack.config.js 文件

搜索 test: cssRegex 或者直接搜索 cssRegex,现在您将看到类似于以下内容:

test: cssRegex,

          exclude: cssModuleRegex,
          use: getStyleLoaders({
            importLoaders: 1,
            sourceMap: isEnvProduction && shouldUseSourceMap,
          }),

现在在importLoaders:1后面添加modules:true,然后保存文件。

现在可以使用npm start重新启动服务器,您将看到应用了样式。

打开.js文件并像这样导入语句

import cssStyleClassName from './MyAppStyle.css';

请在导入时不要忘记为样式文件添加.css扩展名。
然后,这个导入语句允许你对组件标签进行以下更改,就像这样: <div className={cssStyleClassName.styleName}></div> 其中styleName是你在MyAppStyle.css文件中定义的。
.styleName{
your properties here...
}

仅为了使用CSS模块而强制退出是不明智的,您将失去使用Create React App获得的所有更新,并且需要自行管理所有依赖项。 - Neil

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接