CODEWITHSUNDEEP
cssangularsass
Pranav Bhatia
Pranav Bhatia

Reputation: 155

CSS Variable loading svg file multiple times

I am using variables in CSS/SCSS. I want to set a background (using an SVG file), but it is re-loading every time I navigate or perform some other action.

Please see the image attached

My -Variables.scss file:

:root {
  --backgroundTheme: url('triangle-dark.svg') no-repeat;
}
$variables: (
  --backgroundTheme: var(--backgroundTheme)
);

My styles.scss file:

@import "~assets/_variable";

body:before {
  background-size: cover;
  background: var(--backgroundTheme);
}

How can I avoid multiple times loading of this file?

PS: This is an Angular 8 project.

Upvotes: 1

Views: 890

Answers (3)

Ivan Ivanov
Ivan Ivanov

Reputation: 91

I had the same problem recently. It was caused by the inspector - "Disable cache" was enabled: enter image description here

You just need to uncheck it and it will stop making new requests.

Upvotes: 2

ptommasi
ptommasi

Reputation: 1252

I have two possible idea, not sure if they works for you but it's an easy check:

  • If you can, don't use css variables, use scss instead. My general approach is to have a settings.scss file and import it whenever needed in the other files. It's a personal preference, I find it easier to manage like that.
  • It could as well be something wrong in the backend, are the caching headers set right? You can check that in Chrome itself, by clicking on tringle-dark.svg, Headers tab, then Response Headers.

Upvotes: 0

Sneeuwitje
Sneeuwitje

Reputation: 1

To use the image multiple times in the DOM with only one request from the CSS you should use the content property of your pseudo element target to render the image:

body::before {
  content: var(--backgroundTheme, 'alt text');
}

Although you'll probably need another approach in handling the image. It might not work for you.

Upvotes: 0

Related Questions