Question

我正在学习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'
  },

Answer 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]'
    },

React.js中的CSS模块无法加载

1 个答案: