Angular 2 avoid compiling images defined in CSS

Question

I have a styles.css in my Angular 2 application. It's referred to in app.styles object in .angular-cli.json. Inside that css I have urls to background images, e.g:

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

When compiling the app, it seems Angular 2 copies the files from their location into the root folder of the compiled app and adds to its name a random hash.

For instance assets/app/game_bg_768.jpg will be copied to dist/ (compiled app folder) as game_bg_768.023f195663c85e8f0322.jpg.

Then in the styles css compiled by Angular 2, the reference will be changed accordingly:

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

I'd like to disable that whole process, only for images that are linked to in CSS, I don't want to disable random hashes generation for the whole app.

The reason behind this - I'm preloading assets/app/game_bg_768.jpg before the game starts, but since a different url is specified in the compiled css, during the game another request is made to load game_bg_768.023f195663c85e8f0322.jpg.

Another reason is, I'd like my images to remain in my assets folder, I don't want them to be duplicated into the root folder of the compiled app.

MIWMIB · Accepted Answer · 2022-08-18 02:35:25Z

1

You can use absolute URLs to avoid it.

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

However, after you do that, the compiler won't check if the images exist in assets directory anymore.

Also, if you are deploying your app to a subdirectory of the domain, the browser will look for the asset on /assets instead of /subdirectory/assets. Using base-href or deploy-url won't help.

answered Aug 18, 2022 at 2:35

MIWMIB

1,4971 gold badge14 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:17:36Z

0

As an idea, you need to reconfigure webpack settings and set corresponding loader settings. BUT, AFAIK by default AngularCLI doesn't provide a visible config file for webpack, so, you need to make some tricks for that and keep in mind aftermath or you can try to play with assets configuration in .angular-cli.json

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Mar 19, 2017 at 1:12

ivamax9

2,6291 gold badge26 silver badges33 bronze badges

3 Comments

Royi Bernthal Over a year ago

Is there perhaps a simpler workaround such as defining the background-image css inside the HTML instead of instead the CSS? Perhaps that way Angular 2 won't get to it?

ivamax9 Over a year ago

@RoyiBernthal you are right, it will be more easy to do)

ivamax9 Over a year ago

@RoyiBernthal you can edit plain html or move it to component/directive with a template, both variants should be ok. Just FYI: There is no influence of Angular 2. This renaming stuff produced by webpack which is embedded build system in Angular CLI. You can use different build system and keep using Angular CLI, but it's advanced scenario, more details: github.com/angular/angular-cli/wiki/…

Collectives™ on Stack Overflow

Angular 2 avoid compiling images defined in CSS

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related