[英]Webpack compiling CSS into strange classnames
I am currently using webpack
while developing React app with a NodeJS backend. 我目前在使用webpack
后端开发React应用时使用webpack
。
I am having trouble with styling the app because it seems webpack trying to do something with my css where it ends up changing the classnames. 我在设计应用程序样式时遇到了麻烦,因为似乎webpack试图用我的CSS做某事,最终导致更改类名。
For instance in my base.css
file I have this: 例如在我的base.css
文件中,我有这个:
body {
background: #ECEFF1;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 1.7;
margin: 0 auto;
padding: 30px;
max-width: 980px;
}
.progress {
background-color: #FFECB3;
}
.progress .indeterminate {
background-color: #FFC107;
}
Which when I load the page and look in the head is converted to a <style>
div with these classnames: 当我加载页面并看向头部时,哪个会转换为具有以下类名的<style>
div:
<style type="text/css">
body {
background: #ECEFF1;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 1.7;
margin: 0 auto;
padding: 30px;
max-width: 980px;
}
.base---progress---1RR8Z {
background-color: #FFECB3;
}
.base---progress---1RR8Z .base---indeterminate---23sZH {
background-color: #FFC107;
}
So progress styles aren't being picked up on the page because they are changed into this format. 因此,进度样式不会更改为该格式,因此不会在页面上显示。 How can I avoid this or have React change the class names appropriately? 如何避免这种情况或让React适当地更改类名?
If I removed this from my webpack config: 如果我从我的webpack配置中删除了它:
{
test: /\.css$/,
loader: 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]'
}
Line it says that it can't find the css file but the path it errors out on is valid. 提示它找不到css文件,但错误出的路径是有效的。
Webpack config for good measure: Webpack配置很好:
'use strict';
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'eval-source-map',
entry: [
'webpack-hot-middleware/client?reload=true',
path.join(__dirname, 'public/app/main.js')
],
output: {
path: path.join(__dirname, '/dist/'),
filename: '[name].js',
publicPath: '/'
},
plugins: [
new HtmlWebpackPlugin({
template: 'public/app/index.html',
inject: 'body',
filename: 'index.html'
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
],
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
"presets": ["react", "es2015", "stage-0", "react-hmre"]
}
}, {
test: /\.json?$/,
loader: 'json'
}, {
test: /\.css$/,
loader: 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]'
}]
}
};
Your config currently uses css-modules . 您的配置当前使用css-modules 。 To disable it change 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]'
to 'style!css'
in the loader for css
files. 要禁用它'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]'
css
文件的加载程序中的'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]'
更改为'style!css'
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.