dumi2配置unocss v0.59.0,暂时的hack 方法

304 阅读1分钟

因为dumi 继承自umi 所以dumi 是可以用umi 的配置文件的,但是稍作修改

第一步:保证umi版本为umi4 第二步:安装@umijs/plugins

pnpm add -D @umijs/plugins

第三步:安装 unocss @unocss

pnpm i unocss @unocss/cli

第四步:配置.dumi.ts

import { defineConfig } from 'dumi';


export default defineConfig({
  outputPath: 'docs-dist',
  themeConfig: {
    name: 'shein-rc',
    nav: [
      { title: '组件', link: '/components' },
      { title: 'hooks', link: '/hooks' },
    ],
  },
  plugins: [require.resolve('@umijs/plugins/dist/unocss')],
  unocss: {
		watch: ['src/**/*.tsx'], // 添加其他包含 unocss 的 classname 的文件目录
	},
 }

此处注意:umi 文档写的是pages 要改成src

watch: ['src/**/*.tsx'] 

第五步:配置unocss.config.ts

import { defineConfig, presetAttributify, presetUno } from 'unocss';

export function createConfig({ strict = true, dev = true } = {}) {
	return defineConfig({
		envMode: dev ? 'dev' : 'build',
		presets: [presetAttributify({ strict }), presetUno()],
	});
}

export default createConfig();

以上是结果方案,尝试了很多,如果有其他的更好方案希望大佬们可以推荐