两个项目之间的 CSS 覆盖不同？答案

【问题标题】：CSS Overriding Differently Between Two Projects?两个项目之间的 CSS 覆盖不同？
【发布时间】：2019-10-02 15:56:19
【问题描述】：

过去我大部分时间都在做后端工作，但我正在自己学习如何使用 Vue，除了部分色盲之外，设计并不是我的强项。因此，我使用template，这样我至少可以有一个基础开始学习。

然而，奇怪的是，我多次注意到 CSS 在我的副本上的加载方式与模板不同，我似乎无法弄清楚原因。简而言之，似乎我复制到新项目的 SASS 并没有以相同的方式覆盖。

我的版本：

模板项目，直接来自 GitHub：

我可以通过找到有问题的 CSS 并在末尾添加一个“！important”来解决这个问题，尽管这感觉像是解决问题的一个相当老套的解决方案，我最好还是找到真正的罪魁祸首，尽管这也许是最好的解决方案。

SASS 是直接从模板中复制过来的，所以我知道没有任何问题。我的版本和模板也使用 Webpack 附带的 Vue-CLI，所以我不确定它是否可以有一些变化，Webpack 选择一个文件级联另一个文件？我的 package.json 文件中有所有相同的依赖项，所以我知道我没有遗漏一些关键的依赖项。

我已在我提供的链接中标记了 Imgur 图片，但为了澄清起见，我希望背景对于我提供的检查来说是透明的。在模板中，透明背景覆盖了白色，但是当我运行此模板的副本时，白色覆盖了透明。这发生在我发现的很多地方，所以它不仅仅是一个特定的部分。

希望这个问题没有太多无法回答的可能性。我只是不明白有什么不对劲的地方。

【问题讨论】：

@PatrickStephansen 不知道，但这只是术语问题。
@PatrickStephansen 这就是我目前所做的。 Webpack 肯定会处理它，因为您可以在图像中看到它被标记为“inline:...”。我只是说 Webpack 在那里，因为我不确定它是否可能会错误地捆绑东西，但如果像你说的那样，Vue 使用了作用域 CSS，Webpack 可能不是问题。
可能与stackoverflow.com/q/53675683/1981247 相关（也可以阅读链接的内容）
我在已删除的 cmets 中遗漏了要点，因为您的屏幕截图没有为我加载。我不知道这怎么可能。规则具有相同的特殊性，所以我认为最后出现的规则应该获胜。
@Traxo 据我所知，这似乎不相关。变量已设置，并且设置正确，只是覆盖很奇怪。

【解决方案1】：

如您所见，两条 CSS 规则具有相同的特异性，因此所有事物都相等，第二条规则将覆盖第一条规则。在这个项目中，基本上有两种样式导入：Vuetify 和模板的 SASS 文件（在 @/styles/index.scss 中找到）。

我能够通过移动这两个样式表的导入来重现问题。

为了获得预期的行为，您必须在 Vuetify 提供的样式表之后导入 vuetify-material-dashboard 提供的样式。

在模板项目中，Vuetify首先在main.js中导入为import './plugins'。覆盖 Vuetify 样式的 vuetify-material-dashboard 样式表导入到 App.vue（main.js 的子代）中。

【讨论】：