AngularJS with Webpack - Requiring CSS & Preprocessors

Kent C. Dodds
InstructorKent C. Dodds

Share this video with your friends

Send Tweet

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.

Jason
Jason
~ 6 years ago

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).

Kent C. Dodds
Kent C. Doddsinstructor
~ 6 years ago

You're absolutely correct. :-)

Roger Vandawalker
Roger Vandawalker
~ 5 years ago

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?

Kent C. Dodds
Kent C. Doddsinstructor
~ 5 years ago

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.

Sergey
Sergey
~ 5 years ago

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?

Kent C. Dodds
Kent C. Doddsinstructor
~ 5 years ago

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 :-)