Question

在我构建并运行react + webpack应用程序后，我只是想知道为什么我的css名称变为 hash 。是否有提前配置可能是我错过设置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'
};

这是成为哈希的css名称：

<小时/> 的修改

为了更清楚，我在React上添加了import和use css的源代码：

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混淆类名。这在导入第三方库CSS文件时很有用。

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

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

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

Answer 2

在您的webpack配置中，css loader需要对前缀名称进行配置。基本上localIdentName:'[local]'会将前缀设置为仅本地类名称。

有关详细信息，您可以查看：Documentation link

 module: {
    rules: [

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

Answer 3

这个问题现在已经很老了，但是如果有人遇到这个问题，可以通过将CSS名称的localIdentName选项设置为[local]_[hase:base64:5]来将类名与自动生成的哈希组合起来。

[local]是指类名。

[hash:base64:5]表示生成长度为5的base64哈希字符串。

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

通过将css-loader模块选项设置为对象，实际上是将模块设置为true，但是具有特定选项。

将localIdentName设置为[local]完全违背了使用CSS模块的目的。

如何在webpack配置文件中设置css名称不是哈希？

3 个答案: