Question

我有两个样式表是根据相同的.scss文件构建的，仅在几个地方有所不同。一个是所有样式的大师，另一个在这里和那里缺少一些作品。这些需要共存，它们每个都有特定的用例，并打算由用户下载。因为webpack不会单独捆绑CSS，所以我必须导入这两个样式表，这意味着它们可能会影响我的网站。

我的index.js很像

import "./master.scss";
import "./specific-case.scss";

我的webpack.config.js很像

module.exports = {
    ...
    ...
    plugins: [
        specificCaseExtraction,
        masterExtraction,
        ...

我希望整个应用程序使用master.scss样式，但是在某些地方，尽管spceific-case.scss使用了相同的源代码，但spceific-case.scss却在搞乱样式（优先级定义得很清楚）与单张纸本身在一起，但它们不能很好地配合使用，这只是此演示应用程序中的一个问题，如果正确使用，则永远不会这样。

基本上，我的问题可以归结为：是否有办法确保一个样式表优先于另一个样式表？这是订购问题吗？我尝试在index.js中交换它们，但并没有帮助，而在webpack.config.js中交换它们则有点复杂，因为masterExtraction是手动调用的，而specificCaseExtraction实际上是动态注入的众多注入之一。或者，更好的是，有没有一种方法可以将webpack编译并将.scss打包为.css而不将其注入到页面本身中？

更新：事实证明，在具有相同特异性的时代，最下层的样式才是有效的样式。这意味着颠倒列表中插件的顺序会使master.css出现在之下在最终index.html中的specific-case.css中，这意味着主样式始终优先于其他样式我的问题解决了。

Answer 1

CSS特定性是优先顺序。这是迄今为止我看过的最好的文章：https://www.skptricks.com/2018/08/timed-out-receiving-message-from-renderer-selenium.html

这是一个使用LESS代替SASS的类似项目，但是概念是相同的。 https://css-tricks.com/specifics-on-css-specificity/

希望有帮助。

以相同的特异性针对相同元素的两个样式表优先？

1 个答案: