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的根目录。我想要它在一个子文件夹中。不是资产文件夹，因为它也在构建过程中复制，并且我不希望有任何冲突（覆盖）。我想要子文件夹“ 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": "flags" 在angular.json文件中。或在命令行上使用--resourcesOutputPath =“ flags”标志。

角度（2+）：将SCSS中的图像参考复制到dist（构建）的根目录中

1 个答案: