能否用Angular CLI生成适配uncss的全模板CSS规则构建页面？

当然可以！你完全不需要依赖Rendertron，Angular CLI本身就支持**预渲染（Prerendering）**功能，能帮你生成包含所有模板DOM元素的静态HTML，正好满足Uncss识别CSS规则的需求。下面是具体的实现方式：

• 直接使用预渲染构建命令
  执行这个命令代替普通的ng build：

  ng build --prerender
  

  这个命令会在构建过程中，把你Angular应用里的路由对应的组件模板都渲染成真实的静态DOM节点，最终输出到dist目录的HTML文件里不再是只有空的根组件选择器，而是包含了所有模板里用到的元素、类名，Uncss就能准确识别哪些CSS规则是被使用的了。

• 在angular.json里配置预渲染（可选）
  如果你需要指定要预渲染的路由列表，或者调整预渲染的细节，可以在angular.json里修改配置：

  1. 在architect > build > options中添加"prerender": true
  2. 在architect > prerender节点下，配置routes数组，列出你需要预渲染的所有路由路径，比如：

     "prerender": {
       "builder": "@angular-devkit/build-angular:prerender",
       "options": {
         "routes": [
           "/",
           "/about",
           "/contact"
         ]
       }
     }
     

  之后执行ng build就会自动触发预渲染流程。

• 为什么预渲染能解决你的问题？
  普通的ng build生成的是单页应用（SPA），HTML里只有根组件的占位符，模板内容是在浏览器端通过JavaScript动态渲染的，Uncss这种工具没办法解析动态生成的DOM，自然抓不到模板里的CSS规则。而预渲染是在构建阶段就把组件模板转换成静态HTML，相当于提前完成了浏览器的渲染工作，Uncss直接扫描静态HTML就能找到所有被使用的选择器了。

内容的提问来源于stack exchange，提问作者Ole