在我的应用中，假设我有两个 JS 页面 A 和 B，每个页面都导入不同的样式表 ( import '../style/<A or B.css>' )。
两个样式表具有相同的类名，但属性不同。
我运行 yarn run dev ==> dev: webpack-dev-server --inline --hot ==> webpack -p
这就是我的 html <head>看起来像
https://imgur.com/a/1JVb5
先加载A页面样式表，再加载B页面CSS样式
当我转到页面 B 时，css 是正确的
当我转到页面 A 时，css 混淆了，一些类样式被页面 B.css 覆盖。
我的元素结构是这样的
public/
bundle.js
index.html
src/
components/
pages/
style/
App.js
index.js
package.json
webpack.config.js
我的 webpack.config.js 是
const path = require('path');
var config = {
entry: path.resolve(__dirname, 'src', 'index.js'),
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js'
},
devServer: {
contentBase: path.resolve(__dirname, 'src'),
publicPath: path.resolve(__dirname, 'public')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: [
{ loader: 'babel-loader',
options: { presets: ['react','env'] } }
]
},
{
test: /\.css$/,
use: [
{ loader: "style-loader?singleton",
options:
{ singleton: true }
},
{ loader: "css-loader" }
]
}
]
}
};
module.exports = config;
我希望 Webpack 合并多个元素并修复 css override 问题
在 Webpack 中，我试过 style-loader?singleton和 { singleton: true }但它没有用。
编辑 1:查看 extract-text-webpack-plugin
编辑 2:
import movieStyle from '../style/MovieDetail.css'
...
return (
<div id="CellDetail_right" className={ movieStyle['cell-detail-right'] }>...</div>
)
好的，我添加了options: { modules: true }它没有用。我的 classNames 是带连字符的，编译后浏览器呈现没有任何样式或类的组件。
浏览器上的 Div 看起来像 <div id="CellDetail_right">...<div>
最佳答案
一种解决方案是启用局部范围的 css 以避免样式溢出/覆盖。
更新您的 css-loader 选项以包含 modules: true
{
test: /\.css$/,
use: [
{
loader: "style-loader",
options: { singleton: true }
},
{
loader: "css-loader",
options: {
modules: true,
camelCase: 'dashes',
localIdentName: '[path][name]__[local]'
}
}
]
}
然后，在您的组件中使用:
import styles from '../style/MovieDetail.css';
function MyComponent() {
return (
<div className={styles.container}>
<div className={styles.cellDetailRight}>Some Content</div>
</div>
);
}
这确保尽管您在其他 css 文件中定义了更多 .container 规则，但此特定规则会变成类似 ._-path-to-component__container 的内容。
在选项中使用 camelCase: 'dashes' 转换连字符规则。
dashes in class names will be camelized
您还可以查看我的 webpack-demo元素，其中包括处理您的场景的配置。 检查webpack configurations
阅读更多关于 css-loader options 的信息
关于css - Webpack 无法修复 CSS 覆盖问题并在 <head> 中捆绑 <style> 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49308182/