嵌套的类不能在带有webpack的CSS模块中工作(Nested classes not working in CSS Modules with webpack)

我使用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标签显示类名称，但没有属性与它关联。

任何想法我在这里做错了什么？

编辑::山姆的建议工作，我总结了解决它的变化：

由于嵌套是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包。

Im using webpack and css-loader and style-loader to enable css modules in my React app. These are the following setup:

Webpack config:

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] };

And in my React component I've coded this:

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;

In my Carousel.css file:

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

When I check the rendered HTML, I can see carousel class and its properties coming in the parent div. But the child img tag shows the class name but no property is associated with it.

Any idea what Im doing wrong here?

EDIT:: Sam's suggestions worked and Im summarising the changes that solved it:

Since nesting is a feature of css, we need to use sass or less. And for that I used postcss-loader.

Updated webpack config rules section:

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"* ] }

Also added a postcss.config.js file like this:

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

And added postcss-loader, postcss-nested packages using npm install -D option.