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

我的Angular 2应用程序中有一个styles.css。在.angular-cli.json的app.styles对象中被引用。内部的CSS我的URL背景图像，例如：Angular 2避免编译在CSS中定义的图像

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

当编译应用程序，它似乎角2份，从他们的位置到编译应用程序的根文件夹中的文件，并增加了它的名字随机哈希值。

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

在风格

随后的CS 2角编制，参考也随之改变：

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

我想禁用全过程，仅适用于那些链接到CSS，我不图片不想为整个应用程序禁用随机哈希生成。

背后的原因 - 我在游戏开始之前预加载assets/app/game_bg_768.jpg，但由于在编译后的css中指定了不同的url，因此在游戏过程中会另外请求加载game_bg_768.023f195663c85e8f0322.jpg。

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

来源

2017-03-18 Royi Bernthal

作为一个想法，您需要重新配置webpack设置和set对应的loader设置。但，AFAIK默认AngularCLI不提供的WebPack可见的配置文件，这样，你需要做出一些tricks为并牢记后果或者你可以尝试在.angular-cli.json

来源

2017-03-19 01:12:39 ivamax9

与assets configuration玩有也许是一个更简单的解决方法，例如在HTML中定义背景图像CSS而不是CSS？也许这样Angular 2将无法实现它？ –

@RoyiBernthal你是对的，它会更容易做到） – ivamax9

@RoyiBernthal你可以编辑纯html或将它移动到组件/指令与模板，这两个变种应该没问题。只是FYI：没有Angular 2的影响。这个重命名的东西由webpack生成，它是Angular CLI中的嵌入式构建系统。您可以使用不同的构建系统并继续使用Angular CLI，但它是高级场景，更多详细信息：https：//github.com/angular/angular-cli/wiki/stories-moving-out-of-the-cli – ivamax9

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

回答

相关问题