react项目打包后部分样式失效的原因

最新推荐文章于 2023-06-19 14:50:17 发布
最新推荐文章于 2023-06-19 14:50:17 发布
阅读量2.9k 收藏 1
点赞数 1
分类专栏： react.js 文章标签： css reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44481459/article/details/106940182
版权

       今天测试提了几个样式的bug,我在本地怎么都重现不了，最后连接测试服务器进行调试，发现确实存在问题，但是就有点蒙蔽，把样式和本地的进行了比对，最后发现是两个组件最外层的className命名冲突了。。。

      在本地开发时，不同的组件会调用自己import的样式，在项目打包后，所有的css文件进行了压缩，部署后，相同类名的样式会相互冲突，所以我们在开发的时候一定要注意，在每个组件的最外层包上一个专属的className,这样就不会出现这种问题了

weixin_44481459
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
记一次react前端项目打包优化的方法
10-15
在本文中，我们将深入探讨如何优化一个React前端项目，特别是针对打包过程中的性能问题。首先，我们遇到的问题是在uat环境中，由于bundle.js文件过大（3.6MB），导致页面加载时白屏时间超过30秒，严重影响用户体验。...
基于react项目打包css引用路径错误解决方案
01-18
没有去修改create-react-app默认的配置文件 执行npm start 一切正常, 但是 npm run build 之后生成的打包文件只能在根目录访问 这样放在服务器目录就访问不到了 报错为 手动更改index.html的路径之后又报静态...
项目部署到服务器无法样式,react打包部署到服务器上样式加载不出来
weixin_39875503的博客
08-13 1283
问题react打包部署到服务器上样式加载不出来。其实经过仔细核查代码，发现本地能加载出来所有样式，在index.js首页的样式也能加载出来，但是每个路由组件的自定义样式不能加载出来。问题前提在项目中进行了动态import，且路由组件本身引入了自定义的css文件在服务器端或者index.html页面设置了 内容安全策略Content-Security-Policy style-src 限制层叠样式表...
React项目引入Antd后经过Webpack打包，没有任何报错，但是组件样式不生效。
XiaoSen207的博客
06-24 1792
在安装Antd之后，经过Webpack打包，组件样式不生效。如图，在引入Button按钮后，样式不生效。 刚开始的时候以为是class没有绑定上，所以打开了开发者工具，找到了改按钮的代码，通过查看代码，确定了class确实已经绑定在这个按钮上了，然后再接着查看目录，里面也确实有文件。很明显的这里已经是被css样式渲染了，但是按钮依旧是没有效果。 ， 因为这个项目经过了webpack打包，所以我便怀疑是因为webpack打包引起的问题，所以 我创建了一个新的React项目，也不引入Webpack，只引入了A
react项目sass打包后样式错乱bug记录
qq_60178319的博客
03-29 513
react引入的sass样式错乱
打包部署后css不生效
biggerAndStrong的博客
11-15 727
部署后css不生效
React——解决样式丢失问题
x1037490413的博客
09-10 1002
当我们要在路由前加前缀时，比如自己公司的名字或者什么，刷新页面时样式会丢失，打开控制台的网络选项卡却发现bootstrap已经请求回来了 请求地址本来应该是下图： 结果是这样 文件夹的路径本应该是根路径的css下的bootstrap.css 由于路径错了，会返回index.html 有三种解决办法 1.删除这个. ./和/的区别在于：./是相对路径，是在当前路径下去找 /是直接去localhost:3000/css/bootstrap 2.绝对路径 3.不改css的路径，将index.js中的路由改为
详解React项目如何修改打包地址（编译输出文件地址）
10-17
在React项目中，修改打包地址（编译输出文件地址）是一个常见的需求，特别是在将项目部署到特定环境或者整合到统一平台时。本文将详细介绍如何在使用`create-react-app`搭建的React项目中调整打包输出路径。 `...
浅谈React Native打包apk的坑
08-28
React Native 打包 APK 的坑 React Native 是一个基于 JavaScript 和 React 的框架，用于构建跨平台的移动应用程序。在构建 React Native 应用程序时，需要将应用程序打包成 APK 文件，以便在 Android 设备上运行。...
2022-03-19 学习记录--React-解决样式丢失问题
weixin_48850734的博客
03-27 1407
React-解决样式丢失问题
React项目中使用css样式修饰——css样式失效
all_might1的博客
07-24 1630
不要写成以下形式 <button className = 'css-btn' onClick = { this.handleBtnClick }>添加</button> className之后的=左右两边不要加空格 反正就是很迷的感觉 写C++写贯了，喜欢在=的两边都空出一格方便区分查看 结果在设置样式的时候因为这样写了，结果其他都是对的，就是样式失效在页面中呈现不出来 我感觉我的直觉还是蛮准的，想了下总觉得是不是空格的原因，就把空格删除了，于是样式就出来了。。.
【React】react+scss样式表样式某些不起效
最新发布
Weiqian_的博客
06-19 408
react+scss样式表样式某些不起效
react中引入图片路劲正确但是页面上不显示或者打包后不能正常显示的问题
qq_51398495的博客
01-07 3008
一、react中图片引入方式 　以前我们用img引入图片只需要如下即可，在react中这样写会报错： <img src="../assets/zzsc1.png" /> 下面我总结了两种方式： 1、用require方式引入路劲 错误用法： <img src={require("./zzsc1.png")} /> 上面这样写也是不会生效的，因为如果使用create-react-app和require导入图像，require返回一个ES模块而不是字符...
React按需打包antd样式
H1455483319的博客
07-04 610
先引入三个插件 npm install babel-plugin-import react-app-rewired customize-cra --save-dev 在根目录下新建一个config-overrides.js,写入一下代码 const {override,fixBabelImports,addLessLoader} = require('customize-cra') module.exports=override( fixBabelImports('import',{
【react+antd4.x】本地和环境上功能展示不一致
all_might1的博客
03-01 1186
最近在升级antd，整出来一些奇奇怪怪的问题。 本地功能是完全正常的没有其他问题，上到测试环境就不可以了。这事儿搞了几天，心态爆炸属于是 最后看了antd的更新日志，发现4.18.0改了Table的某些内容，感觉很有可能和这个有关。把antd版本降下来，发到环境上终于好了。 如果本地功能都是正常的，发到环境上有问题，也许是antd版本的问题 可以看一下日志，降版本，版本太高不稳定 ...
react打包部署到服务器上样式加载不出来
qq_36990322的博客
03-19 2192
问题 react打包部署到服务器上样式加载不出来。 其实经过仔细核查代码，发现本地能加载出来所有样式，在index.js首页的样式也能加载出来，但是每个路由组件的自定义样式不能加载出来。 问题前提 在项目中进行了动态import，且路由组件本身引入了自定义的css文件 在服务器端或者index.html页面设置了 内容安全策略Content-Security-Policy style-src ...
Vue项目打包问题（生产环境样式失效）
m0_49909696的博客
01-06 7774
Vue项目打包问题解决
antd 拖拽表格排序 拖拽后行消失的问题
qq_42802698的博客
09-21 1283
antd 拖拽排序时，拖拽的行消失，放开鼠标时又显示，体验不好
关于使用 react-sortable-hoc 拖动时丢失拖拽元素的样式
微光的博客
02-08 864
在拖动项目时，该元素不再链接到父类，而是父类之外的单独元素。因此它失去了所有的造型！因此为了解决这个问题，我们可以像这样把元素样式定义在全局。使用less样式嵌套。
react项目打包后混淆源代码
05-30
React 项目打包后混淆源代码可以使用 webpack 的 UglifyJS 插件。UglifyJS 是一个 JavaScript 压缩和混淆工具，可以将 JavaScript 代码压缩并且混淆变量名，从而使代码更难以阅读和理解。 要使用 UglifyJS 插件，需要在 webpack 的配置文件中进行如下配置： ```javascript const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); module.exports = { // 其他配置... plugins: [ new UglifyJSPlugin({ sourceMap: true }) ] }; ``` 这样，在运行 `webpack` 打包命令时，UglifyJS 插件会自动对打包后的 JavaScript 代码进行压缩和混淆，生成的代码将更加难以读懂和修改。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值