search

sveltejs / sapper

The next small thing in web development, powered by Svelte
https://sapper.svelte.dev
MIT License
6.99k stars 433 forks source link

[Request] Hash global.css #508

Closed mattpilott closed 6 years ago

mattpilott commented 6 years ago

Hello,

Would it be at all possible to hash the global.css file as i'm currently adding a query string to the url every-time I make a change which i push. Would be super handy to have this be done automatically.

Thank you!

maxmilton commented 6 years ago

Are you referring to the /static/global.css file in sapper-template? One option would be to import your CSS in a script (e.g. /src/client.js) and handle your global styles with webpack/rollup. Sapper will take care of it and inject it into /dist/client/main.[hash].css.

There was a similar discussion in https://github.com/sveltejs/sapper/issues/474.

mattpilott commented 6 years ago

Yes i am referring to exactly that. Do you have an example rollup config per chance?

maxmilton commented 6 years ago

Yes, I have one public project using this style of setup. The project itself works fine but there's limited documentation etc. as it's a WIP.

  1. CSS entry point: https://github.com/MaxMilton/homie-bot/blob/master/src/client.js#L2
  2. Relevant part of rollup config: https://github.com/MaxMilton/homie-bot/blob/master/rollup.config.js#L37
  3. Custom rollup plugin which handles global CSS (using PostCSS for preprocessing and Purgecss to remove unused styles): https://github.com/MaxMilton/homie-bot/blob/master/rollup-plugins.js#L20-L82

You probably wouldn't need a custom rollup plugin. If you're using plain CSS then you don't need any extra plugins.

mattpilott commented 6 years ago

Thank you @MaxMilton I have successfully implemented this!