Add hash to css file names

Question

Background

I have two css files - styles.mobile.css and styles.desktop.css
As the name suggests, I am using two separate css for mobile and desktop views
I inject css dynamically in index.html based on screen size
Obviously I can't put them in styles.css
I have attached folder structure screenshot

Question Is there a way to add hashing to styles.mobile.css and styles.desktop.css when I run ng build --prod

Code to detect device and inject css

 private addCss(): void {
    if (this.currentDevice === "desktop") {
      this.document
        .getElementById("theme")
        .setAttribute("href", "styles.desktop.css");
    } else {
      this.document
        .getElementById("theme")
        .setAttribute("href", "styles.mobile.css");
    }
  }

Why don't you use single css and add media query to differentiate css based on screen size? — Amit Gurbani
– Amit Gurbani, Commented Jun 11, 2018 at 6:36
I don't see why you can't put them into your style.css file. Make a media query and you're good to go. — user4676340
– user4676340, Commented Jun 11, 2018 at 6:37
@trichetriche Both styles.mobile.css and styles.desktop.css are altogether different. So I decided to have two separate manageable css instead of single giant file. — shobhit vaish
– shobhit vaish, Commented Jun 11, 2018 at 6:43
Doesn't change the fact that you can create a single file that import both separate files, and use media queries to chose which one to use. — user4676340
– user4676340, Commented Jun 11, 2018 at 6:46

ararb78 · Accepted Answer · 2018-10-31 13:19:24Z

1

Add "ng build --prod --output-hashing all", hash contents of the generated files and append hash to the file name to facilitate browser cache busting

answered Oct 31, 2018 at 13:19

ararb78

1,1855 gold badges21 silver badges46 bronze badges

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

1 Comment

Mohamad Over a year ago

no it works only for js, it is not adding the hash to our css in angular and it causes issue in the browser's cache.

Bk Santiago · Accepted Answer · 2018-06-11 07:00:21Z

0

You need to manage your css files on a stylesheet rather than on your index.html, first convert your css files to scss

styles.desktop.scss

@media (min-width: 940px) {
   // your styles here
}

styles.mobile.scss

@media (max-width: 940px) and (min-width: 100px) {
  // mobile specific styles here
}

Edit you .angular-cli.json

Add both scss to app.styles

"apps": [
  {
    ...
    styles: [
      "styles.desktop.css",
      "styles.mobile.css"
    ]
  }
]

ng build --prod should automatically produce a hashed and a stylesheet file.

edited Jun 11, 2018 at 7:00

answered Jun 11, 2018 at 6:50

Bk Santiago

1,5733 gold badges13 silver badges25 bronze badges

1 Comment

shobhit vaish Over a year ago

Thanks for your response but mobile user will end up downloading desktop css which is never gonna used and vice-versa

Collectives™ on Stack Overflow

Add hash to css file names

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related