打包部署后css不生效

最新推荐文章于 2024-03-19 08:25:21 发布
最新推荐文章于 2024-03-19 08:25:21 发布
阅读量714 收藏
点赞数
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/biggerAndStrong/article/details/127871838
版权

本地没有问题， 但是打dist包部署以后整个项目的css样式会丢失

但是打包成功 dist里面也会有css文件，

可能是项目里面会有缓存，换包的时候给index.html文件中 .css后面添加一个随机数

例： .css?v=123456

针对的是打包正常但是css不生效的缓存问题， 相当于手动清缓存

山间里的杂货铺
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决在vue项目中webpack打包后字体不生效的问题
01-19
最近在项目开发过程中遇到如下问题：开发环境中设置的字体样式使用webpack打包后到生产环境不生效。如图： 打开控制台查看元素样式，发现在开发环境的时候”微软雅黑”被解析成unicode编码并且带着双引号， 但使用...
解决vue+elementui项目打包后样式变化问题
11-19
main.js中的引入顺序决定了打包后css的顺序，组件内的样式没有生效可能是被第三方组件样式覆盖了，所以把第三方组件放在前面引入，router放在后面引入，就可以实现组件样式在第三方样式之后渲染。 代码如下： main....
网站部署到服务器后 CSS 文件加载成功，但是没有生效
皮蛋很白的博客
05-09 2045
刚解决了一个问题，前端代码发布到服务器后，样式没有生效。 开始以为 nginx 配置的静态资源路径有问题，通过 network 发现 css 文件确实请求成功。 然后怀疑代码有问题，查看 css 文件中其中一个 dom 节点的样式，确实能匹配上（data-xxx 一致），将样式拷贝后通过 elements 看板手动添加上，样式也生效了。 文件下载成功，内容没问题，但就是没有生效，好像浏览器并没有据此构建 CSSOM（这一点也许可以通过性能调试工具查看），如此神奇的事情之前没有遇到过。 后来发现原来是 ngi
Webpack打包css到js中css样式不起效果
CSU_Zipple的博客
10-09 3240
今天通过修改webpack的moudle.rules属性来将css打包到js中，其实就是去除了MiniCssExtractPlugin.loader。 这样能够实现打包效果，但却在项目中引用时发现css无法加载到dom上。 通过分析打包后的js文件，可以发现css代码都是被exports.push到exports变量中了。 exports.push([module.i, "/* left-menu...
uniapp打包H5,nginx部署无法读取/static目录下index.xxxxx.css
最新发布
weixin_41463944的博客
03-19 604
uniapp打包H5,nginx部署无法读取/static目录下index.xxxxx.css
vue项目打包部署后css样式失效
qq_35673096的博客
11-09 1311
发现不是路径问题，而是加载的不对，content-type:text-plain,而不是content-type:text/css，没解析出来，最后清缓存。项目部署后，样式失效，很奇怪，审查元素发现没有样式，不过却加载了css文件，问题出在哪里呢？
webpack编译出来的css不生效
风烟
09-01 875
项目从webapck3升级到webpack5，vue中的scss编译出来的是这个样子，看起来scss loader配置没问题，就是vue-loader配置版本的问题了。
vue 部署在页面空白,找不到js或css文件 (net::ERR_ABORTED 404 (Not Found))
qq_37807767的博客
03-20 9006
vue项目在nginx上部署正常 这里写目录标题vue项目在nginx上部署正常问题解决拓展 最近接了一个新项目,有一个模块测试,必须在甲方爸爸指定的终端上测试… 好,为了所谓的安全,可以! 过了几天… 撸了几天的代码,发量又依稀减少了, 终于 本地联调,在nginx上部署成功啦!!! 拿着装好打包完成的u盘 经历了几个环节终于把文件用 xftp 拖到了服务器上. 嗯?看着部署小哥一顿操作,把我的小宝贝放到了tomcat下,心里涌起来一股不好的感觉… 这…这和我想的不太一样啊! 果不其然… 问题 net:
jsp部署服务器后在浏览器中css失效
yq15797688367的博客
07-11 893
然后查看css路径是否正确 一般在HTML和jsp中css和js使用相对路径，建议使用全路径，同时contextPath来获取web应用路径来访问css 同时在访问时发现css可以正常获取，说明路径没问题 css语法没问题，路径也没问题，按理来说可以正常使用 经过检查后发现css的类型为text/html，正确的为text/css;charset=UTF-8 找到错误之后，发现是设置了全局过滤器的原因 修改之后发现恢复正常 只能说尽量少用全局过滤器，这样的话会把css]、js、图片等资源无法使用。...
Vue打包部署到Nginx时,css样式不生效的解决方式
10-15
主要介绍了Vue打包部署到Nginx时,css样式不生效的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
nextjs-tailwind:带tailwindcss项目的nextjs框架
04-02
这是一个用引导的项目。 入门 首先，运行开发服务器： npm run dev # or yarn dev 用浏览器打开以查看结果。...部署Next.js应用程序的最简单方法是使用Next.js创建者提供的。 查看我们的以了解更多详细信息。
Hexo博客部署服务器时访问静态资源失败(css,js)
m0_48630721的博客
11-22 956
Hexo部署服务器出现的静态资源问题
webpack4 css打包压缩问题
weixin_34357928的博客
05-17 202
这两天一直在练习这个webpack4, 发现有好多问题和坑，做开发嘛，一定要有喜欢出问题并喜欢解决问题，坚决踩个坑填个坑的不怕死小强精神！ webpack4 在配置上其实是可以是想production和development的， // webpack.config.js module.exports = { // webpack...
react项目打包后部分样式失效的原因
weixin_44481459的博客
06-24 2896
今天测试提了几个样式的bug,我在本地怎么都重现不了，最后连接测试服务器进行调试，发现确实存在问题，但是就有点蒙蔽，把样式和本地的进行了比对，最后发现是两个组件最外层的className命名冲突了。。。 在本地开发时，不同的组件会调用自己import的样式，在项目打包后，所有的css文件进行了压缩，部署后，相同类名的样式会相互冲突，所以我们在开发的时候一定要注意，在每个组件的最外层包上一个专属的className,这样就不会出现这种问题了 ...
解决vue打包之后部分css不生效问题
Wangdr的博客
04-03 8541
用vue的脚手架做前端开发的时候，本地开发所有的样式都能生效，但是打包之后就会有部分样式失效（我遇到的问题是，当内容超过3行的时候，多出部分省略的样式无法添加。），且在浏览器中无法找到该css属性。解决办法如下：首先注释掉webpack.prod.config.js中，下面的代码 new OptimizeCSSPlugin({ cssProcessorOptions: config.bui...
Hexo 主题部署到gitee上css样式不生效问题
Genus_的博客
01-25 3454
前几个月搭建了一个hexo主题的博客,部署在了gitee(为什么不要GitHub ? 因为好慢 T_T ~~ ),总结下遇到的几个坑 guestljz的博客 本地访问正常 部署在gitee上样式不生效?? 样式不生效的主要原因是css文件路径出了问题,样式没有链到 所以需注意一下几点 : 大家在将博客部署在gitee上首先第一步就是要新建一个仓库 !!! 这里要注意 仓库名必须和你注册gitee或GitHub的用户名一致 对应的,我们上面的仓库路径中使用的是https ,所以在这边也要勾选强制使用h
【React】react+scss样式表样式某些不起效
Weiqian_的博客
06-19 405
react+scss样式表样式某些不起效
使用Hexo部署静态网站或博客到github(gitee)时css或js样式无法显示的问题原因以及解决方案
DoublePeach的博客
08-12 4905
既然不是语法的问题那就是路径的问题了，可能是路径问题导致的css或js文件未导入或未加载到，我就开始检查我的hexo里的_config.yml文件。url 是github的仓库地址，无误，但root是要填仓库所在的根路径，这里却填成了仓库路径，导致路径找不到，所以样式无法加载，这样把错排出来后面就简单多了！我第一反应是这些静态文件未编译或者语法有问题，但找半天后并没有发现语法上有什么问题。最后一定记得先把github仓库刷新一下，然后再访问目标网页地址，这时就会发现样式都出现了，问题解决！...
终于解决！css已加载却不显示样式
qq_45829545的博客
10-06 6496
项目场景： 最近用python flask写一个网页，前端用的是flask-bootstrap。之前有自学过，打算练练手。 由于真实代码比较复杂，不能很好的体现核心问题，所以我这里写了一个非常简单的页面。虽然简单，但体现的问题是一样的。 问题描述： 在用于渲染的网页模板index.html中，我引入了一个外部css链接： <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='webStyle.css')
nginx部署vue css样式不生效
08-30
要解决Nginx部署Vue项目中CSS样式不生效的问题，首先需要确定问题的原因。以下是可能的原因和解决方法： 1. 检查CSS文件路径：确保CSS文件的路径是正确的。在Vue项目中，CSS文件通常位于src/assets/css/目录下。检查Nginx配置文件中的root选项是否正确指向了Vue项目的dist目录。 2. 检查Nginx配置文件：检查Nginx配置文件中是否正确设置了静态资源的访问路径。可以通过在Nginx配置文件中添加以下配置来确保正确处理CSS文件： ``` location /static { alias /path/to/your/vue/project/dist/static; } ``` 3. 检查Vue配置文件：检查Vue项目中的vue.config.js文件是否正确配置了publicPath选项。确保publicPath的值是正确的，例如： ``` module.exports = { publicPath: '/' } ``` 4. 检查缓存：如果在开发过程中修改了CSS文件并重新构建了Vue项目，但在部署后仍然看不到样式改变，可能是因为浏览器缓存了旧的CSS文件。尝试在浏览器中使用Ctrl + Shift + R强制刷新页面，并清除浏览器缓存。 5. 检查CSS文件内容：确定CSS文件中的样式是否正确。可以在浏览器的开发者工具中查看CSS文件是否成功加载，并检查其中的样式是否正确。 如果以上方法都无法解决问题，可以尝试在Nginx日志中查看是否有相关错误信息，并检查控制台是否有报错信息。如果问题仍然存在，可以尝试搜索相关的解决方案或在Vue论坛寻求帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值