使用 .less 文件覆盖 Vuetify 样式答案

【问题标题】：Override Vuetify styling with .less file使用 .less 文件覆盖 Vuetify 样式
【发布时间】：2021-01-08 07:24:18
【问题描述】：

我正在开发基于 Vue 和 Vuetify 的应用程序。到目前为止，该库被证明在快速制作新功能原型方面很有帮助。但现在我必须将应用程序中的样式与已经在“.less”文件中完成的指定样式对齐。

我知道可以覆盖 Vuetify 的 SASS 变量，但这意味着每次我必须调整的外部样式发生变化时，我都需要修改变量。这不是我真正想要的，因为我想尽可能顺利地整合两者。

我已经设法将 LESS 文件加载到应用程序中，但样式总是被 Vuetify 样式覆盖。有没有人遇到过这样的问题？

【问题讨论】：

【解决方案1】：

您应该检查的第一件事是，当您的 .less 文件被加载时。如果要覆盖 Vuetify 样式，则必须在 Vuetify 样式之后加载您的 .less 文件。

第二件事是，可能有一些 Vuetify 样式使用了!important 规则。这将自动覆盖您的样式，如果它没有在 Vuetify 样式之后被 laoded 并且还包括 !important 规则。

最后但同样重要的是，如果 Vuetify 样式不使用 !important 规则，您可以考虑使用它自己覆盖 Vuetify 样式。但请记住，您应该尽可能避免使用!important。只有在确实没有其他选项可以解决问题时才应该使用它。

【讨论】：

是的，这正是发生的事情。 .less 文件已加载并正在工作，但一些 Vuetify 样式具有 !important 规则，这些规则会覆盖它们。我的样式都没有使用！important，因为我知道使用它们不是一个好习惯。我只是想知道是否有某种方法可以覆盖 Vuetify 完成的样式，而不是一个一个地修改 SASS 变量。如果没有，我想我应该考虑放弃 Vuetify，因为修改组件以满足我的需求变得越来越难。
@maleficca 好吧，如果 Vuetify 使用的是 !important 而你不使用，恐怕你将无法覆盖你想要的样式。