整理 Dolphin 应用开发过程中遇到的问题~

开发实践

antd与tailwindcss样式发生冲突

1. 问题描述

项目使用 vite 构建，模板为 react-ts，安装 antd@5.x  与 tailwindcss@3.x  后，按照顺序引入 css 后发现 antd 的按钮（Link）背景变成透明了。

               
1
2
3
4
               @import 'antd/dist/reset.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

               COPY
             

2. 原因分析

大胆猜测下，css 样式问题，一般都是样式冲突，导致某个样式被优先级高的样式覆盖了。通过查看css发现，造成这个问题的原因是：@tailwind base内的基础样式，覆盖掉了antd.css的部分样式。

3. 解决方案

方案一：

禁止tailwindcss的默认属性,添加corePlugins对象，并设置preflight为false：

               
1
2
3
4
5
6
               module.exports = {
  
  corePlugins: {
    preflight: false
  }
}

               COPY
             

方案二：

不需要禁止tailwindcss的默认属，参考antd按需引入解决tailwindcss冲突：

参考 issue 

vite-plugin-imp 

使用vite-plugin-imp，对antd的样式文件进行按需引入：

               
1
2
3
4
5
6
7
8
9
10
11
12
13
14
               // vite.config.ts
// 需要安装less， antd的使用的less
export default defineConfig({
  plugins: [
    vitePluginImp({
      libList: [
        {
          libName: "antd",
          style: (name) => `antd/lib/${name}/style/index.css`,
        },
      ],
    }),
  ],
});

               COPY
             

day.js 使用

1. 严格校验没有生效问题

检查传入的值能否被解析，且是否是一个有意义的日期。 最后两个参数 format 和 strict 必须提供。

使用本功能需先配置 CustomParseFormat  插件，才能正常运行