rsbuild使用unocss

备份

这套方案应该是根据unocss官网的webpack配置，然后结合AI搞出来的。
因为我发现无论是rsbuild还是rspack都不是这样配置的。

import { defineConfig } from '@rsbuild/core';
import { pluginBabel } from '@rsbuild/plugin-babel';
import { pluginSolid } from '@rsbuild/plugin-solid';
import {presetWind4} from '@unocss/preset-wind4';
import {UnoCSSRspackPlugin} from '@unocss/webpack/rspack';
export default defineConfig({
  plugins: [
    pluginBabel({
      include: /\.(?:jsx|tsx)$/,
    }),
    pluginSolid(),
  ],
  tools: {
    rspack: {
      plugins: [
        UnoCSSRspackPlugin({
          presets: [presetWind4()],
        }),
      ],
    },
  },
});

推荐写法

// postcss.config.mjs
import UnoCSS from '@unocss/postcss';

export default {
  plugins: [UnoCSS()],
};

// uno.config.ts
import { defineConfig,presetWind4 } from 'unocss';

export default defineConfig({
  content: {
    filesystem: ['./src/**/*.{html,js,ts,jsx,tsx}'],
  },
  presets: [presetWind4()],
});

下面是main.css，官方是写了个选择性导入@unocss preflights;@unocss default;。
但是这样导入无法正常使用bg-black这样的类，因为css变量是空的，完全是残废。
因此使用下面这样的写法。

@unocss;

然后在index.tsx中导入css。

import './main.css';