如何将CSS文件嵌入Angular Web Component的最终构建JS文件中

组件级样式内联方案（零额外配置可落地） #

• 将所有样式定义在组件内部的方案完全可以达成CSS内嵌的预期目标，无需手动创建webpack配置文件，适配当前基于Angular自定义元素构建Web Component的流程。
• 落地操作步骤：
  • 梳理项目所有全局样式（包含Angular Material主题样式、通用基础样式），将这些样式的引用路径从angular.json的全局styles配置数组中移除
  • 把上述样式文件的路径，添加到Web Component入口组件的styleUrls配置数组中
  • 执行原有构建命令，Angular CLI会自动将组件关联的所有样式（含Angular Material组件内置样式）编译内联，最终不会单独产出独立CSS文件，所有样式随JS产物一起加载
• 效果验证：内联后的样式会依托Web Component的Shadow DOM实现天然样式隔离，和单独加载外部CSS文件的表现完全一致，不会出现样式丢失、与宿主页面样式冲突的问题

自定义webpack配置的常见误区 #

• 项目根目录手动新增的webpack.config.js不会被Angular CLI自动识别生效，Angular CLI默认使用封装后的内部构建规则，没有内置的自定义配置加载逻辑
• 只有通过安装@angular-builders/custom-webpack依赖、修改angular.json中的构建器配置指向自定义规则后，手动新增的webpack配置才会生效，这套流程对当前的内嵌CSS需求属于过度配置，无引入必要

构建参数校验 #

• 确认angular.json中对应构建目标的extractCss配置项设为false，从配置层面关闭构建时抽离独立CSS文件的逻辑
• 针对Angular Material的样式兼容：将预定义主题的CSS文件路径移入入口组件的样式配置后，不需要额外调整选择器或样式优先级，构建管线会自动处理样式的内联逻辑

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