如何在webpack配置文件中设置css名称不为hash？

Question

我只是想知道为什么我的 css 名称在我构建并运行我的 react + webpack 应用程序后变成了哈希。是否有我可能错过的高级配置以正常设置 css 名称？

这是我的 webpack 配置：

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: './app/app.jsx',
    output: {
        path: __dirname,
        filename: './public/bundle.js'
    },
    resolve: {
        alias: {
            applicationStyles: path.resolve(__dirname,'app/styles/app.css'),
            Clock: path.resolve(__dirname,'app/components/Clock.jsx'),
            Countdown: path.resolve(__dirname,'app/components/Countdown.jsx'),
            CountdownForm: path.resolve(__dirname,'app/components/CountdownForm.jsx')
        },
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    { loader: 'style-loader' },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    }
                ]
            }
        ]
    },
    devtool: 'cheap-module-eval-source-map'
};

这是变成 hash 的 css 名称：

---

编辑

为了更清楚，我在 React 上添加了 iimport和usecss的源代码：

import React from 'react';
import ReactDOM from 'react-dom';
import Countdown from 'Countdown';
/* import the css file */
import Styles from 'applicationStyles';

ReactDOM.render(
    /* use css */
    <div className={Styles.box}>
        <Countdown/>
    </div>,
    document.getElementById('app')
);

Answer 1

这就是 Webpack 默认所做的，以避免相同的 css 类（来自不同的 css 模块）发生冲突。

这里有 3 件事你可以做

1：在应用层面，您可以将以下配置添加到您的 webpack 以禁用 css 模块。不推荐，因为它可能导致冲突并且很难找到错误。

options: {
    modules: false
}

2：在文件层面，可以这样导入，防止webpack混淆类名。这在导入 3rd 方库 CSS 文件时很有用。

import '!style!css!golden-layout-css-base';

3：在css类级别，可以使用:global(.your-class-name)避免混淆特定类

:global(.container) {
  padding: 10px;
}

Answer 2

在 Webpack 配置中，CSS 加载器需要前缀名称的配置。基本上localIdentName:'[local]'仅将前缀设置为本地类名。

详细信息可以查看CSS Loader 的文档

 module: {
    rules: [

        {
            test: /\.css$/,
            use: [
                { loader: 'style-loader' },
                {
                    loader: 'css-loader',
                    options: {
                        modules: true,
                        localIdentName:'[local]'
                    }
                }
            ]
        }
    ]
}