The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Angular with Webpack - Requiring CSS & Preprocessors

Angular with Webpack - Requiring CSS & Preprocessors

6:07
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.
Watch this lesson now
Avatar
egghead.io

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.

Avatar
Yonatan

I've tried your code here as well. The only difference is the name of the directive.

Here's my issue now:
I've setup the css and style loaders as mentioned in the video.
But when I use "webpack" I get this:
ERROR in ./directives/myDirective.css
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../node_modules/css-loader/index.js in C:\Users\Yonk\Documents\gridApp/app\directives
@ ./directives/myDirective.css 4:14-85

ERROR in ./directives/myDirective.css
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../node_modules/style-loader/addStyles.js in C:\Users\Yonk\Documents\gridApp/app\directives
@ ./directives/myDirective.css 7:13-71

Any idea why?

In reply to egghead.io
Avatar
Kent C.

Are you sure you installed the css-loader and the style-loader? Make sure to run npm install css-loader style-loader

In reply to Yonatan
Avatar
Eduardo

I had the same problem, using path.join in the context solved the problem.

More info here:

https://github.com/webpack/css-loader/issues/64

In reply to Yonatan
Avatar
Jason

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

Avatar
Kent C.

You're absolutely correct. :-)

In reply to Jason
Avatar
Pavel

thanks, that helps (win 10)

In reply to Eduardo
Avatar
Roger Vandawalker

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?

Avatar
Kent C.

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.

In reply to Roger Vandawalker
Avatar
Sergey

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?

Avatar
Kent C.

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

In reply to Sergey
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?