AngularJS with Webpack - Requiring CSS & Preprocessors
Making your CSS modular is a difficult thing to do, but using Webpack makes this so much easier. By adding a single line to your Webpack config, you can require you CSS, Stylus, Less, etc. files right from your directives and keep everything together.
Course
webpack v1 from Kent
What's the point of excluding node_modules from the style loader? It means that you can't require .css files from any npm modules, which is something you'll want to do from time to time (for example loading the angular-material) css. I can't foresee any major downsides (with babel it makes sense since there's no reason to run the loader on perfectly good es5 javascript).
You're absolutely correct. :-)
Are there no significant performance hits by bundling the CSS within the bundle.js? Are you sacrificing the browser's inherent caching of external CSS files?
I have seen no negative impact because the bundle.js itself is cached. And I often don't update the JavaScript without updating the CSS anyway.
If you are concerned, there are ways that you can inform the loaders to save the result in a separate file. But I would recommend that before adding that layer of complexity, you first measure whether it will make a difference for your use case.
How would you make your .styl code use variables from other files with webpack? For example, I have a file variables.styl located elsewhere, how can I use it in kcd-hello.styl?
You can still do normal imports in your stylus files. Treat them like normal stylus files and you'll be able to import variables normally :-)