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

Question

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

但是，很奇怪，我已经注意到很多次将CSS加载到副本中的方式与模板不同，而且我似乎无法弄清楚原因。简而言之，似乎我复制到新项目中的SASS不会以相同的方式覆盖。

我的版本：

模板项目，直接来自GitHub：

我可以通过找到有问题的CSS并在末尾添加“！important”来解决这个问题，尽管这似乎是解决问题的一个很棘手的解决方案，但最好是找到真正的罪魁祸首，尽管也许这是最好的解决方案。

SASS已直接从模板复制，因此我知道没有任何不妥之处。我的版本和模板还使用了Webpack随附的Vue-CLI，所以我不确定在那里是否可以有所变化，因为Webpack选择一个文件级联另一个文件吗？我的package.json文件中具有所有相同的依赖项，所以我知道我没有缺少一些关键的依赖项。

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

希望这个问题没有太多可能性，无法回答。我只是根本不了解什么是不对的。

Answer 1

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

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

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

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