如何在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从版本2开始就支持CSS模块，该模块现已稳定。

通过运行yarn upgrade react-scripts@latest升级到v2 (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。您可以按照this link中所述的这些简单步骤在项目中使用CSS模块。

但是如果您弹出自己的create-react-app，则必须找到名为

的文件

  

“ webpack.config.js”

打开此文件，然后在第no行中找到此{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”的文件，以进行更改。谢谢。

Answer 3

我正在使用3.4.1的{​​{1}}版本，所以这是我的方法

1. 运行命令：react-scripts 2.然后，您将在打开的npm run eject
中获得一个配置文件。
2. 然后搜索webpack.config.js或仅搜索test: cssRegex
3. 现在您将看到类似这样的内容：

cssRegex

在test: cssRegex, exclude: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnvProduction && shouldUseSourceMap, }), 之后添加importLoaders:1,并仅modules:true,个文件。 5.现在，您可以使用save重新启动服务器，您将看到样式已应用。 （如果您已经知道他们的用法）

在这里，当我使用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? } 对我有用。

Answer 4

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

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

Answer 5

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

并使用它加载css到组件你不想（我关注组件，它的css在同一个文件夹中）

import classes from './SomeComponentStyle.css';

...

<div className={classes.RedDiv}>

在SomeComponentStyle.css中

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

Answer 6

您使用的是1.1.4版本，因此CSS模块在默认情况下不起作用...在2.0版以上，它通过将css文件名更改为name.module.css来默认工作。

Answer 7

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

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

1. 如果您在项目中使用git，则应提交更改并将其推送。

2. 执行npm run eject

通过以下更改

3. 编辑您的webpack配置文件dev和prod：

4. 如果您正在运行应用程序，请停止它并重新运行它，这样您将找到更改并可以使用CSS模块。

---

从react-scripts版本2.0.0开始：

您可以关注 create-react-app官方文档中的“ Adding a CSS Modules Stylesheet”。

Answer 8

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

运行命令：npm运行弹出

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

然后搜索测试：cssRegex或仅搜索cssRegex 现在您将看到类似这样的内容：

测试：cssRegex，

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

现在在importLoaders：1之后，添加modules：true，然后保存文件。

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

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

import cssStyleClassName from './MyAppStyle.css';

请不要忘记在导入时将 .css 扩展名添加到样式文件中。

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

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

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

.styleName{
your properties here...
}

Answer 9

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 10

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

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