Angular 10执行ng build后assets图片重复出现在dist根目录如何解决？

该问题由Angular构建的默认资源处理逻辑导致：

• angular.json中配置的assets字段会将整个assets目录原样复制到dist产物目录
• CSS代码中用url()引入的资源会被打包工具单独识别处理，默认直接输出到dist根目录，因此出现两份重复的图片资源

方案1（全局配置，推荐） #

在angular.json的architect.build.options节点下新增resourcesOutputPath配置，指定所有CSS引用的静态资源的输出目录：

"architect": {
  "build": {
    "options": {
      // 其他原有配置保持不变，新增下面一行即可
      "resourcesOutputPath": "assets"
    }
  }
}

配置后重新执行ng build，所有CSS引入的图片都会输出到dist下的assets目录，不会再出现在根目录，也不会和assets目录复制过来的原有文件冲突。

方案2（修改CSS路径写法） #

如果不想修改全局配置，也可以将CSS中的路径写法改为相对于当前CSS文件的相对路径：
你的CSS文件存放路径为src/assets/theme/victor-theme/style.scss，要引用的图片路径为src/assets/img/agg_status.svg，对应写法调整如下：

.tree_status_ico:disabled {
    opacity: 0.6;
    background-size: 18px;
    background: transparent url(../../img/agg_status.svg) no-repeat center;
}

修改后重新构建即可避免资源被输出到dist根目录。

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