嵌套类在带有 webpack 的 CSS 模块中不起作用

Question

我正在使用 webpack 和 css-loader 和 style-loader 在我的 React 应用程序中启用 css 模块。这些是以下设置：

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 标签显示了类名，但没有与之关联的属性。

知道我在这里做错了什么吗？

编辑:: Sam 的建议奏效了，我总结了解决它的变化：

由于嵌套是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 */
        })
    ]
};

并使用 npm install -D 选项添加了 postcss-loader、postcss-nested 包。

Answer 1

你是怎么导入css文件的？

您也可以按照以下方式导入，

在您的组件中，

import ‘styles.css’

在 HTML 元素中，

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

在 webpack 配置中，

{
  test: /\.css$/,
  use: [ 'style-loader', 'css-loader' ]
}