如何在webpack配置文件中设置css名称不为hash? [英] How to set css name not to be hash in webpack configuration file?

问题描述

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

这是我的 webpack 配置:

var webpack = require('webpack');var path = require('path');模块.出口 = {条目:'./app/app.jsx'，输出: {路径:__目录名，文件名:'./public/bundle.js'},解决: {别名:{applicationStyles: path.resolve(__dirname,'app/styles/app.css'),时钟:path.resolve(__dirname,'app/components/Clock.jsx'),倒计时:path.resolve(__dirname,'app/components/Countdown.jsx'),CountdownForm: path.resolve(__dirname,'app/components/CountdownForm.jsx')},扩展名:['.js', '.jsx']},模块: {规则: [{测试:/\.jsx?$/,loader: 'babel-loader',排除:/node_modules/},{测试:/\.css$/,用: [{ loader: 'style-loader' },{加载器:'css-加载器'，选项: {模块:真}}]}]},开发工具:'廉价模块评估源地图'};

这是变成散列的css名称:

<小时>编辑

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

从'react'导入React；从 'react-dom' 导入 ReactDOM；从倒计时"导入倒计时；/* 导入 css 文件 */从applicationStyles"导入样式；ReactDOM.render(/* 使用 CSS */<div className={Styles.box}><倒计时/>

,document.getElementById('app'));

解决方案

Webpack 默认这样做是为了避免相同的 css 类(来自不同的 css 模块)发生冲突.

你可以做三件事

1:在应用级别，您可以将以下配置添加到您的 webpack 以禁用 css 模块.不推荐，因为它可能会导致冲突并且很难发现错误.

选项:{模块:假}

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

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

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

:global(.container) {填充:10px；}

I just wondering why my css name became hash after i build and run my react + webpack app. Is there advance configuration that may be i missed to set the css name as normal ?

This is my webpack config :

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

This is the css name that become hash :

---

EDIT

To be more clear, i add the source code of how i import and use the css on React :

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')
);

解决方案

This is what Webpack does by default to avoid identical css classes (from different css modules) to collide.

Here are 3 things you can do

1: At the app level, you can add the following config to your webpack to disable css modules. Not recommended as it could lead to collision and hard to find bugs.

options: {
    modules: false
}

2: At the file level, you can import it like this to prevent webpack from obfuscating the class names. This is useful when importing 3rd party libraries CSS files.

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

3: At the css class level, you can use :global(.your-class-name) to avoid obfuscating a specific class

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

这篇关于如何在webpack配置文件中设置css名称不为hash?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！