css - 使用 .less 文件覆盖 Vuetify 样式

Question

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

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

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

标签： cssvue.jssasslessvuetify.js

Answer 1

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

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

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