Как сделать модульный css с помощью webpack, без использования create-react-app?

Question

Как сделать модульный css с помощью webpack без использования create-react-app?

Если создавать React приложение через create-react-app, то поддержка модульного css включена сразу
не нужно ничего шаманить, просто создать файл и импортировать его в компонент:

import classes from "./UserInfo.module.css";

Мой webpack конфиг сейчас выглядит так:

const webpack = require('webpack');

module.exports = {
    entry: './src/index.js',
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.css$/i,
                use: ['style-loader', "css-loader"]
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        contentBase: './dist',
        hot: true
    },
    output: {
        path: __dirname + '/dist',
        publicPath: '/',
        filename: 'bundle.js'
    }
};

Answer 1

Обратите внимание на этот пакет https://github.com/css-modules/css-modules Он позволяет организовать модульный css в проекте

Answer 2

Нашел решение без лишних зависимостей: (исходя из ответа andreycrane)
css-loader принимает в себя настройки (options), где можно задать modules: true.

Все правила для создания модульности через пакеты css-loaders и style-loaders:

    {
        test: /\.css$/,
        use: [
            'style-loader',
            {
                loader: 'css-loader',
                options: {
                    importLoaders: 1,
                    modules: true
                }
            }
        ],
        include: /\.module\.css$/
    },
    {
        test: /\.css$/,
        use: [
            'style-loader',
            'css-loader'
        ],
        exclude: /\.module\.css$/
    }

БЛОГ НА HUSL

Как сделать модульный css с помощью webpack, без использования create-react-app?

Как сделать модульный css с помощью webpack без использования create-react-app?

Ответы (2 шт):