Bootstrap-Vue项目本地与生产服务器字体、颜色显示差异问题咨询

1. 优先确认CSS加载顺序&优先级问题 #

• 分别打开本地开发环境、测试环境页面的Chrome开发者工具，选中body元素查看「计算样式」面板的font-family取值，以及对应规则的来源文件
• 全局引入的Bootstrap CSS和原有项目的全局Montserrat字体定义的加载顺序直接决定最终生效字体：生产环境webpack打包时mini-css-extract-plugin的合并逻辑和开发环境style-loader的动态插入逻辑完全不同，很容易出现开发环境Bootstrap CSS在后、优先级更高，生产环境Bootstrap CSS在前、被原有字体规则覆盖的情况
• 可以临时修改main.js的引入顺序，把Bootstrap相关CSS放到所有其他全局CSS引入的最后面，重新打包测试

2. 检查生产环境webpack构建配置差异 #

• 确认process.env.NODE_ENV在生产构建时是否正确赋值为production，部分webpack配置会根据环境变量开启不同的CSS处理逻辑
• 排查是否配置了purgecss、postcss-discard-duplicates这类会删改CSS规则的插件，可能误删Bootstrap的字体、间距相关规则
• 检查打包后的dist目录下的CSS文件内容，搜索Segoe UI、font-family相关规则是否和本地开发环境加载的规则一致

3. 确认服务器静态资源配置正常 #

• 打开测试环境的网络面板，查看所有CSS资源的请求状态：是否返回200，Content-Type响应头是否为text/css，如果返回的MIME类型错误浏览器会拒绝解析CSS
• 排查express的静态资源配置是否设置了过久的强缓存，导致浏览器一直使用旧版本的CSS文件，可按Ctrl+F5强制刷新测试，或者给静态资源路径加哈希后缀

4. 排查样式冲突问题 #

• 原有项目未改造部分的全局样式如果包含.form-control、.nav、label这类和Bootstrap重名的类选择器，很容易出现规则覆盖，可对比同一元素在本地、测试环境的生效样式规则，找出被额外覆盖的属性
• 注意Vue单文件组件的scoped样式在生产打包后会生成属性选择器，优先级高于Bootstrap的普通类选择器，若有全局重名的scoped样式也会导致显示异常

内容的提问来源于stack exchange，提问作者the digitalmouse