uni-app HBuilder打包后丢失css样式

uni-app HBuilder打包后丢失css样式

开发环境 版本号 项目创建方式
HbuilderX 3.1.22

示例代码：

无，代码是正常代码，在h5页面是正常渲染的

操作步骤：

本地复现

预期结果：

预期返回的Content-Type为text/css

实际结果：

Content-Type为text/plain

bug描述：

经chrome://inspect定位发现，与之相关的css文件的响应头的Content-Type=text/plain，导致浏览器拒绝渲染

Response Headers
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin: *
Client-Via: shouldInterceptRequest
Content-Length: 5043
Content-Type: text/plain


更多关于uni-app HBuilder打包后丢失css样式的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

自问自答，发现出问题的css是抽取后的公共样式，而webpack默认的分隔符是~，可能hbuilder打包后导致css文件类型发生改变。 解决方式是，修改webpack分隔符，将"~“改为”_"，即可

更多关于uni-app HBuilder打包后丢失css样式的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题通常是由于服务器配置或打包过程中的 MIME 类型设置不正确导致的。当 CSS 文件的 Content-Type 被设置为 text/plain 时，浏览器无法正确识别并应用样式。以下是几个可能的解决方案：

  1. 检查服务器配置：确保你的服务器（如 Nginx、Apache 或云服务）正确配置了 CSS 文件的 MIME 类型。例如，在 Nginx 中，可以在配置文件中添加：
    types {
    text/css css;
}
回到顶部