![如何在webpack配置文件中设置css名称不为hash]( "如何在webpack配置文件中设置css名称不为hash")
本文介绍了如何在webpack配置文件中设置css名称不为hash?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我只是想知道为什么我的 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 :
EDITTo 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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！