Angular 2避免编译CSS中定义的图像

Question

我的Angular 2应用程序中有一个styles.css。它在.angular-cli.json中的app.styles对象中被引用。在css中，我有指向背景图像urls，例如：

.bg-game {
  background-image: url("assets/app/game_bg_768.jpg");
}

在编译应用程序时，Angular 2似乎将文件从它们的位置复制到编译的应用程序的根文件夹中，并在其名称中添加随机哈希。

例如，assets/app/game_bg_768.jpg将作为game_bg_768.023f195663c85e8f0322.jpg复制到dist/ (已编译的应用程序文件夹)。

然后，在Angular 2编译的样式css中，引用将相应地更改：

.bg-game {
  background-image: url("game_bg_768.023f195663c85e8f0322.jpg");
}

我想禁用整个过程，只针对CSS中链接的图像，我不想禁用整个应用程序的随机哈希生成。

这背后的原因-我在游戏开始之前预加载了assets/app/game_bg_768.jpg，但由于在编译的css中指定了不同的url，所以在游戏期间会发出另一个加载game_bg_768.023f195663c85e8f0322.jpg的请求。

另一个原因是，我希望我的图像保留在我的assets文件夹中，我不希望它们被复制到编译后的应用程序的根文件夹中。

Answer 1

作为一个想法，您需要重新配置webpack设置和set相应的loader设置。但是，AFAIK默认情况下AngularCLI不会为webpack提供一个可见的配置文件，所以，你需要为它做一些tricks，并记住后果，或者你可以尝试在.angular-cli.json中使用assets configuration