【BUG记录】Umi搭建React项目遇到的问题

548 阅读2分钟

tailwindCSS样式优先级覆盖antd

(node_modules/tailwindcss/src/css/preflight.css)tailwindCSS会使用上面的CSS地址为元素重置默认样式,其中包括Button,样式的优先级高于antd,会导致antd的按钮样式失效。参考文章:

方案一:

https://juejin.cn/post/7311343199292276763?searchId=202401101725583E96AFC63C83D0242B7C

方案二:

image.png

方案三: github.com/ant-design/…

image.png

PS:tailWind可以使用line-clamp-2来做超出隐藏,portrait:做横竖屏适配

执行umi lint,报错一堆废弃的规则还在被使用

包版本过低,或者引用的其他包版本过低。

umi的stylelint配置路径:node_modules/@umijs/lint/dist/config/stylelint/index.js

编辑器中没办法编辑这个文件,使用VIM删除这些包做测试,我发现stylelint-config-prettier"这个包的GIT有这么一段,我们使用的是16版本,所以不需要这个包了。

至于这个包stylelint-config-standard,由于pnpm的缓存机制,我们把低版本的包从node-modules中删了,还要从node-modules/.pmpm中删了,以及修改一下umilint中的版本号,新安装一个高版本的就好了。

GitHub - prettier/stylelint-config-prettier: Turns off all rules that are unnecessary or might conflict with prettier.

image.png

require.resolve("stylelint-config-standard"),
    require.resolve("../../../compiled/stylelint-config-prettier"),
    require.resolve("../../../compiled/stylelint-config-css-modules")

umi-history路由跳转到当前页面,数据未更新问题

现象: 问卷系统的点击跳转下一个问卷功能,使用umi的history.replace(),修改量表ID,替换当前地址。一切都没有问题,但是一次更新中,为了做优化,我随手加了useMemo,依赖条件基本是把能加的都加了,结果出了BUG,页面内容并没有更新。

去除chrome中input自动填充背景的方法

freexyz.cn/dev/46799.h…

发现密码框失焦时有颜色,配置

image.png

antd5X 用不了pxtorem

antd5X 用不了pxtorem,因为5X采用了CSSinJS的形式。ISSUE如下:

github.com/umijs/umi/i…

antd内部提供了解决方案

样式兼容 - Ant Design

image.png

目前不确定两个一起用会不会混乱。

按照github.com/umijs/umi/i…

安装pnpm install postcss-px2rem --save-dev,报错,查发现是版本问题,但是同时又发现了有个插件叫postcss-pxtorem,卸载原来那个安这个就好了,配置如下:

image.png

image.png

precommit 放在stash中 然后stash pop 内容消失

下次用stash apply

找回的方式是stash ID e300e385d6a429c6119f2b9a9a2ad0e0f4924d2d

$ git fsck --lost-found找到最近删除的提交

stashID对应的哪一项

$ git merge e300e385d6a429c6119f2b9a9a2ad0e0f4924d2d

跳过commit检查 git commit -m 'test' --no-verify