umijs 项目配置问题汇总

风希落 / 2024-02-26 / 原文

umi 项目问题汇总

umi或 @umijs/max 集成 tailwindcss

正常 umi 内置了 tailwindcss 插件，详情可参考官方文档 Tailwind CSS 配置生成器

但是由于内置的 tailwindcss 插件过老，umi 官方已不推荐使用内置，建议使用 tailwindcss 官方的配置。详情可见 issue

同时，umi 官方也不推荐使用 plugin-request 插件，而是建议使用自己封装的 axios/fetch，详情可见 issue

根据 tailwindcss 官方文档进行安装初始化

npm install -D tailwindcss
npx tailwindcss init  # 此步会在根目录下生成 tailwindcss.config.js

配置内容

/** @type {import('tailwindcss').Config} */
module.exports = {
  // tailwindcss 可使用的区域
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
  // tailwindcss 内置的重置样式和 antd 冲突，取消重置，
  // 无样式的情况下可使用 antd 提供的 App 组件来进行样式重置
  corePlugins: {
    preflight: false,
  },
};

新建 tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

在 umi 的 .umirc.ts 或者 config/config.ts 下集成 tailwindcss

// umi.js 中

export default defineConfig({
  // ...
  tailwindcss: {},
  plugins: ['@umijs/plugins/dist/tailwindcss'],
});

// 在 @umijs/max 中
export default defineConfig({
  // ...
  tailwindcss: {},
  extraPostCSSPlugins: [require('tailwindcss')],
});

更多配置和使用可参考 tailwindcss官方文档

代码规范问题

stylelint 不识别 @tailwindcss

stylelint 默认不识别 @tailwindcss，集成 commitlint 的情况下会造成提交时的校验不通过，无法正常提交代码

module.exports = {
  extends: require.resolve('@umijs/max/stylelint'),
  rules: {
    'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: ['tailwind'],
      },
    ],
  },
};