Вложенные классы не работают в модулях CSS с веб-пакетом - PullRequest
Новая
       38

Вложенные классы не работают в модулях CSS с веб-пакетом

0 голосов
/ 26 мая 2018

Я использую webpack, css-loader и style-loader для включения модулей css в моем приложении React.Это следующие настройки:

Конфигурация Webpack: 

module.exports = {
    mode: "development",
    entry: __dirname + "/app/index.js",
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            modules: true,
                            localIdentName: "[name]__[local]___[hash:base64:5]"
                        }
                    }
                ]
            }
        ]
    },
    output: {
        filename: "bundle.js",
        path: __dirname + "/build"
    },
    plugins: [HTMLWebpackPluginConfig]
};

И в моем компоненте React я закодировал это: 

import React from "react";
import styles from "./Carousel.css";   

class Carousel extends React.Component {
    render() {
        return (
            <div className={styles["carousel"]}>
                <img
                    className={styles["test"]}
                    src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426"
                />
            </div>
        );
    }
}

export default Carousel;

В моем файле Carousel.css: 

.carousel {
    background-color: red;
    .test {
        width: 200px;
    }
}

Когда я проверяю визуализированный HTML, я вижу класс карусели и его свойства, приходящие в родительский div.Но дочерний тег img показывает имя класса, но с ним не связано ни одно свойство.

Есть идеи, что я здесь не так делаю?

РЕДАКТИРОВАТЬ: Сэма сработало, и я суммируюИзменения, которые решили эту проблему:

Поскольку вложение является функцией CSS, нам нужно использовать sass или меньше.И для этого я использовал postcss-loader.

Обновлен раздел правил конфигурации webpack: 

rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            modules: true,
                            localIdentName: "[name]__[local]___[hash:base64:5]"
                        }
                    },
                    *"postcss-loader"*
                ]
            }

Также добавлен файл postcss.config.js, подобный этому: 

module.exports = {
    plugins: [
        require("postcss-nested")({
            /* ...options */
        })
    ]
};

И добавили postcss-loader, вложенные в postcss пакеты, используя опцию npm install -D.

1 Ответ

0 голосов
/ 26 мая 2018

enter image description here Как вы импортируете файл css?

Вы также можете выполнить следующий способ импорта,

В вашем компоненте

import 'styles.css'

В элементе HTML, 

> <div className='carousel'>
         <div className='test'></div>
    </div>

В конфигурации веб-пакета

{test: /.css$/, использовать: ['style-loader ',' css-loader ']}

...