Модули CSS в React.js не загружаются - PullRequest
2 голосов
/ 12 июня 2019

Я изучаю React.js и использую курс Удеми. Дело в том, что с тех пор, как курс был составлен, React был обновлен, а модули CSS были изменены. Я пытался сделать свое исследование и написал код, но классы, кажется, не применяются. Я проверил inspect в браузере и на вкладке 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;
    }
}

EDIT: Строки с 143 по 150 файла webpack.config.dev.js: Файл здесь 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'
  },
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...