Nested classes not working in CSS Modules with webpack

问题

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.

回答1:

How are you importing the css file ?

You can follow the below way to import too,

In your component,

import ‘styles.css’

In HTML element,

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

In webpack config,

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

来源：https://stackoverflow.com/questions/50540900/nested-classes-not-working-in-css-modules-with-webpack

标签

reactjs

Webpack

webpack-style-loader

css-loader

css-modules