Vue样式dev和build下不一致
一次更新镜像后发现 vue 项目页面混乱,在开发模式模式下,写的样式有效,打包后无效
一、多个相同样式文件同时存在项目中
现象:修改组件时,在项目中复制了一个组件重命名后进行修改,在本地执行正常,后打包上传,无法展示正常效果。 解决过程:在本地试图修改总是不见效果,在控制台查看样式仍是之前的样式,把其中一处样式在所有相关组件中修改,打包上传后样式生效,这说明是旧的样式在打包时覆盖了新的样式。将旧组件删除后解决上述问题。 原因猜测:因为相同组件包含不同样式时,无法判断哪份样式时在后面渲染,如果旧样式刚好打包后在后面渲染,则会覆盖掉新写的样式。在本地执行时,因为样式没有打包,访问页面时渲染的都是组件自身样式,所以不会出现上述问题。
二、全局(main.js)引用样式
现象:在全局引入了 Element UI 样式,在 header 组件中修改部分样式,在本地执行正常,后打包上传,无法展示正常效果。 解决过程:因为在项目中段发现该问题,以为是后续的样式造成的影响(虽然我也认为可能性极小),删除新写的组件,没有效果。运行一段时间之前的代码,项目正常运行,这迫使我回想中间这段时间对项目做了什么?除了新写了一些组件,还将一些配置信息从 index.js 中转移到了 main.js 中,测试发现果然是这里出现了问题。配置中同时出现了 Element UI 样式文件引用,还有 router 的引用,将 yang 样式引用放在 router 引用后解决问题。 原因猜测:不正常的样式显示的还是组件原始的样式,由此猜测 router 加载时会加载组件样式,将样式文件在 router 后引用会将 router 加载时渲染的样式覆盖掉,所以建议将 router 的引用放在最后面。在每个组件的样式中记得添加 ‘scoped’.
import "element-ui/lib/theme-chalk/index.css"; //element样式文件
import App from "./App";
如果相反,那么 element-ui 的样式会覆盖自定义的样式,所以会出现你修改的样式不生效问题!!