umi到底怎么使用unocss

[YangJianFei]

文档里面也没有关于怎么使用插件的用法，官方文档很随意，啥都要靠猜

[fz6m]

参考下 unocss 的文档，webpack 或者 postcss 使用方式都可以。

[YangJianFei]

看了，不知道怎么接进来。

[daly-dai]

官方说内置了unocss，但是他呢个文档没说使用了umi/max咋办，使用了umi/max 还不让下umi 。还得使用webpack这样的方式，无语了

[xiaohuoni]

感觉文档里面写的很清楚耶 https://umijs.org/docs/guides/styling#%E4%BD%BF%E7%94%A8-unocss

因为 max 就是 umi。有个 demo 的 https://github.com/umijs/umi/tree/master/examples/with-unocss
如果直接看 demo 不是很理解的话，可以通过以下步骤接入。

安装

pnpm i @unocss/cli unocss

配置

config/config.ts 或者 .umirc.ts 中

  plugins: [require.resolve('@umijs/plugins/dist/unocss')],
  unocss: {
    watch: ['pages/**/*.tsx'],
  },
  routes:[

...
    {
      path: "/unocss",
      component: "unocss",
      layout: false,
      name: "unocss",
    },
...
]

验证

新建页面 pages/unocss.tsx

import React from 'react';

export default function HomePage() {
  return (
    <div className="w-full flex flex-row justify-center pb-16">
      <div className="container">
        <h1
          className="text-gray-700 font-extrabold text-4xl sm:text-5xl lg:text-6xl
        tracking-tight text-center dark:text-white"
        >
          UmiJS
          <span className="mx-4">x</span>
          UnoCss
        </h1>
        <p
          className="mt-6 text-lg text-slate-600 text-center
         max-w-3xl mx-auto dark:text-slate-400"
        >
          This is an example using
          <a
            className="mx-2 text-cyan-500"
            href="https://umijs.org/zh-CN"
            target="_blank"
            rel="noreferrer"
          >
            UmiJS
          </a>
          with
          <a
            className="mx-2 text-cyan-500"
            href="https://github.com/antfu/unocss"
            target="_blank"
            rel="noreferrer"
          >
            UnoCss
          </a>
          .
        </p>
        <div className="w-full bg-gray-50 p-16 mt-16 rounded-2xl">
          <p className="text-slate-900 font-extrabold text-4xl mb-4">
            Examples
          </p>

          <div className="flex flex-row my-16">
            <p className="text-slate-900 font-bold text-2xl w-1/3">Text Size</p>
            <div>
              <p className="text-xs">text-xs</p>
              <p className="text-sm">text-sm</p>
              <p className="text-base">text-base</p>
              <p className="text-lg">text-lg</p>
              <p className="text-xl">text-xl</p>
              <p className="text-2xl">text-2xl</p>
              <p className="text-3xl">text-3xl</p>
            </div>
          </div>

          <div className="flex flex-row my-16">
            <p className="text-slate-900 font-bold text-2xl w-1/3">
              Text Color
            </p>

            <div>
              <p className="text-red-300">text-red-300</p>
              <p className="text-blue-600">text-blue-600</p>
              <p className="text-green-300">text-green-300</p>
              <p className="text-pink-400">text-pink-400</p>
            </div>
          </div>

          <div className="flex flex-row my-16">
            <p className="text-slate-900 font-bold text-2xl w-1/3">Sizes</p>
            <div>
              <div className="bg-white w-24 p-4 shadow-2xl rounded-2xl my-4">
                w-24
              </div>
              <div className="bg-white w-36 p-4 shadow-2xl rounded-2xl my-4">
                w-36
              </div>
              <div className="bg-white w-64 p-4 shadow-2xl rounded-2xl my-4">
                w-64
              </div>
              <div className="bg-white w-96 p-4 shadow-2xl rounded-2xl my-4">
                w-96
              </div>
            </div>
          </div>

          <div className="flex flex-row my-16">
            <p className="text-slate-900 font-bold text-2xl w-1/3">
              Animations
            </p>

            <section className="p-10 flex md:flex-row items-center justify-start flex-wrap sm:flex-col">
              <div className="animate-spin h-32 w-32 relative m-10">
                <div className="absolute inset-0 bg-white opacity-25 rounded-lg shadow-2xl" />
                <div className="absolute inset-0">
                  <div className="h-full w-full bg-white rounded-lg shadow-2xl" />
                </div>
              </div>

              <div className="animate-pulse h-32 w-32 relative m-10">
                <div className="absolute inset-0 bg-white opacity-25 rounded-lg shadow-2xl" />
                <div className="absolute inset-0">
                  <div className="h-full w-full bg-white rounded-lg shadow-2xl" />
                </div>
              </div>

              <div className="animate-ping h-32 w-32 relative m-10">
                <div className="absolute inset-0 bg-white opacity-25 rounded-lg shadow-2xl" />
                <div className="absolute inset-0">
                  <div className="h-full w-full bg-white rounded-lg shadow-2xl" />
                </div>
              </div>

              <div className="animate-bounce h-32 w-32 relative m-10">
                <div className="absolute inset-0 bg-white opacity-25 rounded-lg shadow-2xl" />
                <div className="absolute inset-0">
                  <div className="h-full w-full bg-white rounded-lg shadow-2xl" />
                </div>
              </div>
            </section>
          </div>

          <div className="flex flex-row my-16">
            <p className="text-slate-900 font-bold text-2xl w-1/3">
              Hover Animations
            </p>

            <section className="p-10 flex md:flex-row items-center justify-start flex-wrap sm:flex-col">
              <div className="h-32 w-32 relative cursor-pointer m-5">
                <div className="absolute inset-0 bg-white opacity-25 rounded-lg shadow-2xl" />
                <div className="absolute inset-0 transform  hover:scale-75 transition duration-300">
                  <div className="h-full w-full bg-white rounded-lg shadow-2xl" />
                </div>
              </div>

              <div className="h-32 w-32 relative cursor-pointer m-5">
                <div className="absolute inset-0 bg-white opacity-25 rounded-lg shadow-2xl" />
                <div className="absolute inset-0 transform hover:rotate-90 hover:scale-75 transition duration-300">
                  <div className="h-full w-full bg-white rounded-lg shadow-2xl" />
                </div>
              </div>

              <div className="h-32 w-32 relative cursor-pointer m-5">
                <div className="absolute inset-0 bg-white opacity-25 rounded-lg shadow-2xl" />
                <div className="absolute inset-0 transform  hover:rotate-45 transition duration-300">
                  <div className="h-full w-full bg-white rounded-lg shadow-2xl" />
                </div>
              </div>

              <div className="h-32 w-32 relative cursor-pointer m-5">
                <div className="absolute inset-0 bg-white opacity-25 rounded-lg shadow-2xl" />
                <div className="absolute inset-0 transform  hover:-rotate-45 transition duration-300">
                  <div className="h-full w-full bg-white rounded-lg shadow-2xl" />
                </div>
              </div>

              <div className="h-32 w-32 relative cursor-pointer m-5">
                <div className="absolute inset-0 bg-white opacity-25 rounded-lg shadow-2xl" />
                <div className="absolute inset-0 transform origin-left hover:-rotate-45 transition duration-300">
                  <div className="h-full w-full bg-white rounded-lg shadow-2xl" />
                </div>
              </div>

              <div className="h-32 w-32 relative cursor-pointer m-5">
                <div className="absolute inset-0 bg-white opacity-25 rounded-lg shadow-2xl" />
                <div className="absolute inset-0 transform hover:-translate-x-10 transition duration-300">
                  <div className="h-full w-full bg-white rounded-lg shadow-2xl" />
                </div>
              </div>

              <div className="h-32 w-32 relative cursor-pointer m-5">
                <div className="absolute inset-0 bg-white opacity-25 rounded-lg shadow-2xl" />

                <div className="absolute inset-0 transform hover:rotate-90 hover:translate-x-full hover:scale-150 transition duration-300">
                  <div className="h-full w-full bg-white rounded-lg shadow-2xl" />
                </div>
              </div>

              <div className="h-32 w-32 relative cursor-pointer m-5">
                <div className="absolute inset-0 bg-white opacity-25 rounded-lg shadow-2xl" />
                <div className="absolute inset-0 transform hover:skew-y-12 transition duration-300">
                  <div className="h-full w-full bg-white rounded-lg shadow-2xl" />
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
    </div>
  );
}

启动 pnpm dev 访问 /unocss

这里有一个重复的 demo，就是主仓库里面的 max + unocss 两个 demo 整理了一下。 https://github.com/xiaohuoni/demo-with-umi-max-unocss

[daly-dai]

你说的对，我昨天尝试的时候，应该是缺少了相关的配置，导致东西没出来。但是我还是要死鸭子嘴硬一下，umi的文档确实有不少地方写的很粗略，

[xiaohuoni]

是因为这个实验插件不是主推的，你用了不就发现问题了吗？我看到了，我就会去改这个插件和补充相应的文档。有发现其他不足的地方，欢迎指出来。如果说“很多地方”，“很大问题”这种，我很难知道我们该怎么做。

[sherry007]

使用 UnoCSS

这个地方可能要改一下，这个 plugin-unocss 是内置的，我刚刚看文档的时候以为是要自己安装~，实际是需要在 umirc.ts 里加一下 plugin 的配置对吧 ：

// umirc.ts
{
    plugins: [require.resolve('@umijs/plugins/dist/unocss')]
}

如果我理解有偏差，可以指出来奥

[xiaohuoni]

你是对的，这个plugin 现在是安装了，没有内置使用。因为这个要不要内置使用，还处于讨论阶段。

[sherry007]

get

[19900101eyetest]

onCollapse: (isCollpase) => {
 const mainDom = document.querySelector('.ant-pro-layout-container');
      // 当展开之后
      if (!isCollpase) {
if (mainDom) {
          mainDom.classList.add('overflow-hidden');
          mainDom.classList.add('max-h-100vh');
          // addClass(mainDom, 'overflow-hidden');
          // addClass(mainDom, 'max-h-100px');
        }

export default defineConfig({
  plugins: [
    require.resolve('@umijs/plugins/dist/unocss'),
    //
    '@react-dev-inspector/umi4-plugin',
  ],
  unocss: {
    watch: ['pages/**/*.tsx'],
  },
....

类似以上情况, 无法解析