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

Webpack CSS, Preprocessors, and url assets

Webpack CSS, Preprocessors, and url assets

7:09
Webpack enables modularity by allowing you to require the styles needed for a particular component. Adding preprocessors is a breeze and it simplifies the deployment of your css assets.
Watch this lesson now
Avatar
egghead.io

Webpack enables modularity by allowing you to require the styles needed for a particular component. Adding preprocessors is a breeze and it simplifies the deployment of your css assets.

Avatar
Zachary Klein

Any reason why webpack uses the "bang" symbol to pass through multiple loaders instead of a pipe (like in standard Unix)?

Avatar
Kent C.

Not sure. But you can use the array syntax instead (when doing this, you use loaders rather than loader): loaders: ['style', 'css']

In reply to Zachary Klein
Avatar
Anton Emery

Will this same setup work when using webpack -p to process all the code prior deploying the app?

Avatar
ckot

Would the same technique you used for bundling index.css by requiring it in index.js (removing the need for it's link tag) work for the link tag for the bootstrap.css as well? I'm guessing it's a little more involved as bootstrap is in node_modules, which is excluded in webpack.config.js

Avatar
Kent C.

Actually, you could/should definitely do the same for those assets as well:

require('bootstrap/dist/css/bootstrap.css')
In reply to ckot
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?