Webpack 无法修复 CSS 覆盖问题并在 <head> 中捆绑 <style> 元素
瑞德万·沙克尔
在我的应用程序中，假设我有两个 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 覆盖问题
在 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 }它没有用。我的 className 被连字符连接，并且在编译浏览器后呈现没有任何样式或类的组件。浏览器上的 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>
);
}
这可确保尽管您.container在其他 css 文件中定义了更多规则，但此特定规则变为类似._-path-to-component__container.
使用camelCase: 'dashes'in 选项转换您的连字符规则。
类名中的破折号将被骆驼化
您还可以查看我的webpack-demo项目，其中包含用于处理您的场景的配置。检查webpack 配置
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
隐藏发件人没有短信PHP
- 2
Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听
- 3
在浏览器中请求URL时会发生什么？
- 4
flask-admin 如何自定义删除按钮
- 5
材质UI垂直滑块。如何改变在垂直材料UI滑块导轨的厚度（反应）
- 6
用日期数据透视表和日期顺序查询
- 7
Jqgrid：多级别组摘要
- 8
java io ioexception无法解析服务器地址解析器的响应
- 9
Swift如何使用Base64Url编码JWT标头和有效负载之类的json对象
- 10
sshd AllowGroups组未授予访问权限
- 11
jQuery无限滚动固定div中的滚动
- 12
android 背部按下
- 13
Flexbox CSS 对齐属性环境惰性？
- 14
为什么随机森林中的平均降低基尼系数取决于人口规模？
- 15
ClickHouse 创建临时表
- 16
为什么PlusShare.Builder setRecipients方法不起作用？
- 17
如何在Android中识别MICR代码
- 18
PyQt4.QtCore模块无法向sip模块注册
- 19
正则表达式，用于查找所有以任何字母开头和数字开头的文件
- 20
是否可以通过编程方式对很多动画进行重新着色？
- 21
机器密钥生成
我来说两句