Menu
I have a project with 6 views (html). Each of those views has a corresponding view model (.js) and a style sheet just for that view (.css)
The aurelia-cli does a wonderful job of recursing through my file free and bundling all the .js and .css files into a couple of files so they can be referenced while reducing page load times and size. So if I have a welcome folder with a welcome.html, welcome.js and welcome.css, I can load the CSS for welcome.html with the following <require from="./welcome.css"></require> and the CSS will be injected into the <head></head> tags on page load.
The problem with that is when I navigate to the next view the CSS rules from welcome.html / welcome.css are still within the <head> tag of the webpage thus still being enforced. After visiting all 6 views in my application I now have 6 <style> tags within the <head> tag with all of the rules from all six pages being enforced on every page I go to with no unloading taking place until the page is refreshed. Needless to say after visiting a couple pages the entire site becomes jumbled garbage.
So my questions are
If I had a 10 page app with a global stylesheet, bootstrap, animate css, and font awesome, at the end of the day I have 14 conflicting styles injected permanently into the html the rest of the app is injected into.
Any suggestions?
404
After facing similar situations, experimenting for long hours, I came to a simple conclusion: I'm not fond of this 'injecting CSS files everywhere' approach. Allow me a little rant about it, please. :)
What is the benefit of it?
index.html. Of course, because we'd like to have a nice splash screen before the app loads itself. Even in the official skeleton-navigation app
<require> is its async nature, which gives us little (or no) control over the CSS load order. It's perfect for JS modules/custom elements but not for multiple CSS files.<require> tags placed in each view, just to make our already 'simple' situation even more 'straightforward'.So, wouldn't be easier to pack the rest of the app stylesheets into this already existing global stylesheet, in an explicit order?
My proposal
Aurelia-cli has a great feature, called generators. You can extend its functionality, as you'd like. With this in mind, you can create new tasks for custom CSS pre/after-processing and insert them into the build process.
I've created a small project couple of days ago, which addresses this issue as well: aurelia-custom-skeleton. Working demo here.
base.css from global deps, and an app.css from custom CSS files. This is for debug purposes.styles.min.css, which is deployed and referenced in index.html.
122
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
