使用 .less 文件覆盖 Vuetify 样式

Question

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

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

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

Answer 1

您应该检查的第一件事是，何时加载您的 .less 文件。如果您想覆盖 Vuetify 样式，那么您的 .less 文件必须在 Vuetify 样式之后加载。

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

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