在Angular 17中使用UnoCSS

UnoCSS提供了几种集成方式，包括构建工具的插件、CDN运行时和独立的CLI。虽然Angular 17中使用esbuild/vite作为构建工具，但它没有提供对外暴露相关配置修改的接口。因此，我们只能使用UnoCSS的CLI来监听文件并生成相应的CSS文件。

配置流程

安装UnoCSS CLI

pnpm add -D unocss @unocss/cli

配置UnoCSS文件

创建一个名为unocss.config.js的文件，并按如下方式配置：

import { defineConfig } from 'unocss'

export default defineConfig({
  cli: {
    entry: {
      patterns: [
        'src/**/*.html',
      ],
      outFile: 'src/app/style/uno.css'
    }
  },
  rules: [
    ['m-1', { margin: '1px' }]
  ]
})

这里的patterns表示要监视的文件规则，outFile则是生成的CSS文件路径。

设置package.json Script

在package.json中设置以下脚本，以同时启动Angular开发服务器和UnoCSS监听模式：

"scripts": {
    "dev": "pnpm run /:dev$/",
    "ng:dev": "ng serve",
    "unocss:dev": "unocss --watch",
  },

最后步骤

完成上述步骤后，您就可以在Angular 17中使用UnoCSS了。但是需要注意的是，由于是文件监听模式，如果一些文件虽然写了UnoCSS规则但没有被引用到项目中，这些规则也会被打包进来，导致最终构建文件包含了多余的CSS规则。

您也可以考虑使用Angular的自定义构建器来集成UnoCSS的构建插件，不过这需要对Angular的构建流程有一定的了解。如果你了解相关内容，希望你能与作者分享你的指导意见。

（最后最后，原谅我水文章，只是想记录下平时的过程，练下写作水平）