Angular 12项目生产构建后全局CSS变量重复如何解决

问题根因 #

Angular CLI 12及以上版本的生产构建默认开启了inlineCritical首屏样式优化功能，该功能会自动识别首屏渲染需要用到的关键CSS，将其直接内联到index.html的<style>标签中，同时不会删除原始样式文件中对应的代码，因此导致你的全局CSS变量同时出现在内联样式和独立的styles.css文件中，出现重复定义。

解决方案 #

方案1：关闭inlineCritical优化（操作最简单） #

直接在Angular构建配置中禁用该功能即可，操作步骤如下：

1. 打开项目根目录下的angular.json配置文件
2. 找到对应项目的生产构建配置节点：projects > 你的项目名称 > architect > build > configurations > production
3. 修改optimization配置项，默认值是布尔值true，改成如下对象结构：

"optimization": {
  "scripts": true,
  "styles": {
    "minify": true,
    "inlineCritical": false
  },
  "fonts": true
}

4. 重新执行生产构建命令ng build --configuration production即可，此时不会再自动内联首屏样式，不会出现重复定义问题。

方案2：保留inlineCritical优化，调整代码避免重复 #

如果想要保留首屏样式优化带来的加载速度提升，可以采用以下任意一种方式调整：

• 直接把全局CSS变量的代码写到index.html的原生<style>标签中，不要放在styles.scss里，避免构建时重复打包
• 把全局CSS变量单独抽成一个独立的SCSS文件，比如variables.scss，在angular.json的styles数组中配置该文件单独打包，并且在inlineCritical的排除列表中添加该文件的路径即可。

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