个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
在我的应用中，假设我有两个 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/
25
4
0
在git中，以下有什么区别？ 头 头^ HEAD~1 HEAD~2 它们与 master 有什么关系？那么有没有MASTER^, MASTER~1?? 最佳答案 HEAD 是当前分支上最新提交的同义词
我想实现一个 LinkedListremove 方法，该方法可以删除任何特定位置的项目，但在本例中，我最感兴趣的是删除列表开头(第 0 个位置)的项目。 我的代码适用于 n 大于零的值，因此我为 n=
的顺序有什么关系吗？或 或 标签位于 中？ (愚蠢的问题，但其中一件事我直到现在才考虑过。) 最佳答案 优化 据 Yahoo! 的人说你应该put CSS at the top和 scripts
HEAD 是指向当前分支的指针。我见过 HEAD 祖先的各种符号，包括 HEAD~2 HEAD^2 HEAD@{2} 头~~ 头^^ 以上每一项到底是什么意思？这方面的文件在哪里？ 最佳答案 来自文档
我对 git 很陌生，任何人都可以帮助我。 我实际上被困在什么是“git diff HEAD”。 “git diff HEAD”和“git diff HEAD HEAD~1”有什么区别 最佳答案 gi
我似乎不知道如何获得 git_reference *到特定 Remote 的 HEAD。 我有: git_repository * repo = NULL; git_reference * ref
关于 firefox浏览器控制台，我可以访问 容器如下所示。 > window [object Window] > documentObject = window["document"
我使用 asp.net 4 和 c#。 我在 Web From 页面中有一个 Web 用户控件。当我包含 Web 用户控件时，我还想以编程方式在最终生成的页面的标记中包含一些脚本。 知道怎么做吗？也许
这可能是一个非常愚蠢的问题，但是加载文件中标签之间的数据并通过 PHP include() 加载它是愚蠢的吗？这样就可以更轻松地进行编辑。谢谢。 最佳答案 不，这不会是愚蠢的。代码重复越少越好。 关于
我编写了以下 facelet index.xhtml: 当我从浏览器获取
我有一个不断递增的“指针”，我需要最终返回指针的“头”。我进退两难，要么使用“pointer[0]”，要么使用另一个名为“head”的变量并初始化它并在最后返回。我觉得前者使代码看起来很脏，后来占用的
git push https://heroku:$HEROKU_API_KEY@git.heroku.com/$HEROKU_APP_NAME_PRODUCTION.git HEAD 和 git pu
当我像这样将 Git 子模块添加到 Git 存储库时， git submodule add ssh://server/proj1/ proj1 git submodule init git submo
我的本地存储库中有一个我不打算推送的提交(A)。现在，HEAD 在 A 处。假设我想在提交 (A) 之上创建另一个提交 (B) NOT，但在前一个提交之上而不是提交 (A)。 如何在不丢失最新
多次调用 head.load 是否同步？ 我的意思是，如果我们有这样的代码: head.load('scr1.js',...,'scr8.js'); head.load('scr11.js',...,
执行以下查询时出现以下错误: #1054 - Unknown column 'headings.heading' in 'field list' 标题表中肯定有一个名为“标题”的列。当我测试它时，问题
我试图显示上次提交与之前提交之间的差异: git diff HEAD^ HEAD 但是什么都不显示。事实上，我知道这两个提交之间存在差异。 我做错了什么，我应该如何改正？ P.S.:我觉得这个问题以
这就是场景。我有一个运行一些测试的脚本。我需要制作另一个接受 git 提交名称作为参数的脚本，然后执行以下操作: 保存当前提交状态 - 分支名称或未命名提交。 在指定提交时切换到分离的 HEAD 针对
我发现自己经常输入这个，比如当我做了一些改变，提交它，然后要么需要查找我在那里做的事情来弄清楚下一步该做什么，要么确保我没有添加任何意外的东西在将其推送到远程之前提交。 无可否认，diff HEAD^
我是否理解正确，Git head(小写)和 Git HEAD(大写)的区别在于前者是结束提交，后者只是当前提交(无论是最终提交还是非最终提交被选为 HEAD 提交)？ 编辑:“结束提交”是指“给定分支
我是一名优秀的程序员,十分优秀！