Angular (2+) : Image references in SCSS are copied into root directory of dist (build)

Question

SCSS 中的每个引用图像，如 background-image: url(#{$path}) 都被复制到构建的 dist 目录中。

例子:

src:
|- styles
   |- flags
      |- flags.scss
      |- en.svg
      |- de.svg
      |- cn.svg

(如果我使用 Assets 文件夹并不重要。相同的行为。而且我不希望构建中的所有标志文件，只希望由 scss 引用选择。)

@mixin flag-icon($country) {
  .flag-icon-#{$country} {
     background-image: url(./styles/flags/#{$country}.svg);
  }
}

@include flag-icon(en);
@include flag-icon(de);

构建后:

dist (root of build)
|- assets
|- index.html
|- ...
|- en.<hash>.svg
|- de.<hash>.svg

在构建时，编译器需要引用的文件。没关系，但我不想为这些文件设置输出路径。当前它将复制到 dist 的根目录中。我想要它在一个子文件夹中。不是 Assets 文件夹，因为它也在构建过程中被复制，我不希望有任何冲突(覆盖)。我想要子文件夹“flags”或“img-ref”中的标志。或者将其嵌入构建文件 (js/css)。

预期的构建输出:

dist (root of build)
|- assets
|- ref
|  |- en.<hash>.svg
|  |- de.<hash>.svg
|- index.html
|- ...

如何配置 Angular 编译器将图像引用复制到子文件夹而不是根目录？

[ Angular 7.2.1]

Answer 1

您可以添加这一行:“resourcesOutputPath”:“标志”在 angular.json 文件中。或者在命令行上使用 --resourcesOutputPath="flags"标志。