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

Question

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

52

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

- Muhammad Saqib

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个回答

11

为了在你的应用程序中启用CSS模块，无需弹出create-react-app。您可以按照此链接中描述的简单步骤，在您的项目中使用CSS模块。

但是，如果您弹出了create-react-app，则必须找到名为“webpack.config.js”的文件。

打开此文件并在第391行中查找{test:cssRegex....etc}，然后将其替换为这些更改：

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

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

import cssStyleClassName from './MyApp.css';

然后，这个导入语句允许你在组件标签中进行以下更改，如下所示

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

styleName是你在MyAppStyle.css文件中定义的内容

.styleName{
your properties here...
}

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

注意：在早期版本中，为生产和开发分别生成了两个文件。现在，在当前版本中，只需关注名为“webpack.config.js”的一个文件的更改即可。谢谢。

- SachinVsSachin

我是一个新手React，我认为我弹出了create-react-app。我没有webpack.config.js文件，只有config文件夹中的webpack.config.dev.js和webpack.config.prod.js。我应该在根目录下创建webpack.config.js文件并添加什么代码？ - Vincent

此解决方案不适用于 react-scripts 版本大于 2 的情况，您应该使用以下解决方案: https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/ - Ahmed El Damasy

2

运行命令npm run eject
打开webpack.config.js文件。
找到test: cssRegex部分并按以下方式进行编辑:

{
  test: cssRegex,
  exclude: cssModuleRegex,
  use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction
      ? shouldUseSourceMap
      : isEnvDevelopment,
    modules: {
      // mode: 'icss',
      getLocalIdent: getCSSModuleLocalIdent,
    },
  }),

- Jimmy

2

我正在使用react-scripts的3.4.1版本，以下是我使用的方法：

运行命令：npm run eject
然后您将得到一个配置文件，在其中打开webpack.config.js
搜索test: cssRegex或只搜索cssRegex
现在您将看到类似于以下内容：

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

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

5.现在，您可以使用npm start重新启动服务器，您将看到应用了您的样式。（如果您已经知道如何使用）

这里我使用了[name]__[local]__[hash:base64:5]，因为我遇到了一个错误。

 - options has an unknown property 'localIdentName'. These properties are valid:
   object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals?, esModule? }

所以我把它移除掉，只使用modules:true，这样对我来说就可以了。

- Rohan Devaki

我努力找到了这个 :( 它有效了，谢谢 :) - Fatih Erol

新的更新，甚至可以在没有这些设置的情况下运行。 - Rohan Devaki

1

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

。要使用它，将 CSS 加载到你想要的组件中（我把组件和它的 CSS 放在同一个文件夹中）。

import classes from './SomeComponentStyle.css';

...

<div className={classes.RedDiv}>

在SomeComponentStyle.css文件内。

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

- ivica.moke

1

您正在使用版本1.1.4，因此默认情况下不支持CSS模块化...在2.0以上的版本中，默认情况下通过将css文件名更改为name.module.css来支持CSS模块化。

- Yousuf Shareef

0

使用React-17.0.2，运行以下脚本：

npm run eject

前往文件。

webpack.config.js

搜索

cssRegex

添加以下模块对象

          test: cssRegex,
          exclude: cssModuleRegex,
          use: getStyleLoaders({
            importLoaders: 1,
            sourceMap: isEnvProduction
              ? shouldUseSourceMap
              : isEnvDevelopment,
              modules: {
                localIdentName: "[name]__[local]___[hash:base64:5]"
              }
          })

那么你的 CSS 文件将以名称 header.css 运行。

- shan22

0

根据您的 react-scripts 版本（您可以在 package.json 文件中检查版本）：

对于 react-scripts 版本在 2.0.0 之前的：

如果您在项目中使用 git，则应提交更改并将其推送。
运行 npm run eject
使用以下更改编辑您的 webpack 配置文件 dev 和 prod：
如果您正在运行应用程序，请停止它并重新运行，然后您将找到更改并可以使用 CSS 模块。

从 react-scripts 版本 2.0.0 开始：

您可以按照官方 create-react-app 文档中的 "添加 CSS 模块样式表" 进行操作。

- Ahmed El Damasy

0

有一个新的库叫做patch-styles包。

它引入了一种更声明式的应用样式的方式。您需要使用<PatchStyles classNames={style}>将您的代码包装起来，其中style是样式模块的默认导入。请参见StackBlitz中的使用示例。

- hakobpogh

0

In webpack.config.js file find this keyword 'css-loader'.
You will find below code in line number 82 for react version-16.13
{
   loader: require.resolve('css-loader'),
   options: cssOptions,      
}

Replace above object with 

{
   loader: require.resolve('css-loader'),
   options: {
      modules: {
        mode: "local",
        localIdentName: "[name]_[local]_[hash:base64:5]"
      },
      import: true,
      importLoaders: true
    }     
}

Start the server again by npm start(If changes are not reflected)

- Sumit Tiwari

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- giraffesyo · Accepted Answer

无需弹出。

从2版本开始，Create React App支持CSS模块。

升级到最新的react-scripts@latest版本。 (链接)

如果你使用yarn：

yarn upgrade react-scripts@latest

如果您使用npm：

npm install --save 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>