安装Vuetify后<vs-button>文字颜色变白为黑无法修改如何解决

问题根因 #

你配置的postcss-filter-rules插件过滤了所有匹配/^(select|vs-button)(\W|$)/i规则的CSS选择器，仅保留带.vue-global类的相关样式。这直接导致vs-button原有的白色文字默认样式被移除，安装Vuetify后全局样式覆盖了按钮文字颜色为黑色，且你修改Vuetify主题生成的vs-button相关样式也会被该规则过滤，因此配置不生效。

解决方案 #

方案1：调整postcss过滤规则（推荐） #

根据你的业务需求修改过滤逻辑，二选一即可：

• 若不需要过滤vs-button相关样式，直接修改正则，删除vs-button匹配项：

// 修改vue.config.js中的filter规则
const re = new RegExp(/^(select)(\W|$)/, 'i')

• 若需要保留原有过滤逻辑，给所有使用vs-button的页面外层容器添加.vue-global类，即可命中例外规则，保留对应样式。

方案2：全局样式强制覆盖 #

如果不想修改构建配置，在全局CSS文件中添加样式强制覆盖：

vs-button {
  color: #fff !important;
}

方案3：调整组件库引入顺序 #

如果同时安装了Vuesax和Vuetify两个组件库，将Vuesax的样式引入语句放在Vuetify之后，保证Vuesax的默认样式优先级更高，不会被Vuetify样式覆盖。

内容的提问来源于stack exchange，提问作者Juan Pedro Molina