如何在 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 然后在 webpack 的配置文件中添加这两行

要使用它，请将 css 加载到您不需要的组件（我需要组件，它在同一文件夹中 css）

import classes from './SomeComponentStyle.css';

...

<div className={classes.RedDiv}>

里面SomeComponentStyle.css

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

Answer 2

您不需要弹出。

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

升级到 latest (react-scripts@latest) 版本。

如果你使用纱线：

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>

Answer 3

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

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

的文件

"webpack.config.js"

打开此文件并在第 1 行找到此 {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';

然后此导入语句允许您像这样对组件标签进行以下更改

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

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

.styleName{
your properties here...
}

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

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

Answer 4

您使用的是 1.1.4 版，因此 CSS 模块默认不工作...在 2.0 版以上，通过将 css 文件名更改为 [=12] 可以默认工作=].

Answer 5

取决于您的react-scripts版本（您可以在package.json文件中查看版本）：

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

如果您在项目中使用 git，您应该提交更改并推送它们。
做npm run eject
编辑您的 webpack 配置文件 dev 和 prod，并进行以下更改：
如果您是运行您的应用程序，请停止它并重新运行它，这样您会发现您的更改，然后可以使用 CSS 模块。

从 react-scripts 版本开始 2.0.0:

你可以关注 “Adding a CSS Modules Stylesheet”来自官方 create-react-app 文档。

Answer 6

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

运行命令：npm run eject 2.Then 你会得到一个配置文件，在里面打开 webpack.config.js
然后搜索 test: cssRegex 或只搜索 cssRegex
现在你会看到这样的东西：

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

现在在 importLoaders:1, 之后添加 modules:true, 并且只是 save 文件。 5.Now 您可以使用 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 它对我有用。

Answer 7

标题##我使用react-script版本3.4.3（最新版本）。您只需按照以下给定的步骤操作即可。

运行命令：npm 运行弹出

然后你会得到一个配置文件，在里面打开webpack.config.js

然后搜索测试：cssRegex 或只搜索 cssRegex 现在你会看到这样的东西：

测试：css正则表达式，

          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...
}

Answer 8

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)

Answer 9

有一个名为 patch-styles 包的新库。

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

中的用法示例

Answer 10

如果您运行 npm run eject 并且您仍想使用 'webpack.config.js' 文件启用它，您可以将模块对象添加到 test: cssRegex 部分。像这样：

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

Answer 11

使用 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 文件将使用名称 Eg。 header.css

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

How to use css modules with create-react-app?

reactjs

create-react-app

css-modules

标题##我使用react-script版本3.4.3（最新版本）。您只需按照以下给定的步骤操作即可。