SCSS中所有引用的图像(例如背景图像: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编译器以将图像引用复制到子文件夹而不是根目录中?