vue使用mint-ui中的问题，打包上线之后mint-ui样式没有覆盖，顺序问题

在vue项目中，使用mint-ui组件，想要覆盖掉mint-ui的样式，可以单独建一个scss文件，也可以在各组件用到的地方覆盖掉，（且不说样式的权重，就是想找找茬），开发环境，完美覆盖，build打包后，查看没有覆盖，发现mint-ui的样式顺序在后面，自己写的在前面，所以没盖掉；试了各种，发现在main.js，mint-ui,的引用顺序，//这是原先的，顺序在router之后，...

前端小狮

4038人浏览 · 2018-07-18 16:56:01

前端小狮 · 2018-07-18 16:56:01 发布

在vue项目中，使用mint-ui组件，想要覆盖掉mint-ui的样式，可以单独建一个scss文件，也可以在各组件用到的地方覆盖掉，（且不说样式的权重，就是想找找茬），开发环境，完美覆盖，build打包后，查看没有覆盖，发现mint-ui的样式顺序在后面，自己写的在前面，所以没盖掉；

试了各种，发现在main.js，mint-ui,的引用顺序，
//这是原先的，顺序在router之后，不能覆盖掉样式，
这里写图片描述
//把mint-ui 在router之前引入可以解决，build之后，各组件的样式会盖掉mint-ui

这里写图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^