React.js 中的 CSS 模块不加载答案

【问题标题】：The CSS modules in React.js do not loadReact.js 中的 CSS 模块不加载
【发布时间】：2019-10-27 05:47:16
【问题描述】：

我正在学习 React.js，并且正在使用 Udemy 课程。问题是，自从课程制作到现在，React 已经更新，CSS 模块也发生了变化。我试图进行研究并编写代码，但这些类似乎不适用。我在浏览器中检查了检查，在 React 选项卡下（安装了扩展程序）它说 className={undefined}。在检查器选项卡下它只显示

<div>...</div>

没有应用任何类。我将 css 文件命名为 [component].module.css

这是一个组件，我做的都是一样的，都有这个问题：

import React from 'react';
// import Aux from '../../hoc/Aux';
import Ingredient from './Ingreditent/Ingredient';
import styles from './Burger.module.css';

const burger = props => (
    <div className={styles.Burger}>
        <Ingredient type='bread-top' />
        <Ingredient type='meat'/>
        <Ingredient type='bread-bottom' />
    </div>
);

export default burger;

这里是 CSS 文件 Burger.module.css：

.Burger{
    width: 50vw;
    height: 30vh;
    margin: auto;
    overflow: scroll;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
}

@media (min-width: 1000px) and (min-height: 700px){
    .Burger{
        width: 70vw;
        height: 30vw;
    }
}

编辑： webpack.config.dev.js 的第 143 到 150 行：文件在这里https://1drv.ms/u/s!AuFJzTL8l8Op9g5CBJ8kv8Wv-pcx

    test: /\.css$/,
    options: {
      importLoaders: 1,
      modules: true,
       localIdentName: '[name]__[local]__[hash:base64:5]'
    },
    loader: 'style!css?importLoaders=1!postcss'
  },

【问题讨论】：

您是否更新了您的webpack.config.js 以使css 模块正常工作？
我有两个这样的文件，一个 prod 和一个 dev。它们经常变化。我曾经用测试：cssRegex 现在它是测试：/\.css$/。我尝试过，但没有成功。我有反应 16.8.6。它们似乎随着每一次小更新而改变。
你需要提交你的开发 webpack 配置。尤其是说 resolve: 'css$' 或类似的部分。
我读到您也可以将 .module 扩展名与非弹出反应项目一起使用。我创建了一个新项目，但它不起作用。
我设法使它与未弹出的应用程序一起工作。我进入 package.json 并将 react 脚本的版本更新为 2.0.0 并运行 npm install。在新版本中，如果您进入 webpack 文件手动启用模块，我认为您应该在没有模块扩展的情况下运行。

标签： reactjs webpack

【解决方案1】：

在新版本的 react 中应该是这样的：

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

旧版本：

test: /\.css$/,
    optio`enter code here`ns: {
      importLoaders: 1,
      modules: true,
       localIdentName: '[name]__[local]__[hash:base64:5]'
    },

【讨论】：