我只是想知道为什么在我构建并运行我的 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 上导入
和使用
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')
);
最佳答案
这就是 Webpack 默认情况下所做的,以避免相同的 CSS 类(来自不同的 CSS 模块)发生冲突。
您可以执行以下三件事:
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;
}
关于reactjs - 如何在 Webpack 配置文件中将 CSS 名称设置为不是哈希值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47052080/