1. 3
    Webpack CSS, Preprocessors, and url assets
    7m 9s

Webpack CSS, Preprocessors, and url assets

Share this video with your friends

Send Tweet

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.

Zachary Klein
Zachary Klein
~ 8 years ago

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

Kent C. Dodds
Kent C. Dodds(instructor)
~ 8 years ago

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

Anton Emery
Anton Emery
~ 8 years ago

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

Kent C. Dodds
Kent C. Dodds(instructor)
~ 8 years ago

Yes

ckot
ckot
~ 8 years ago

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

Kent C. Dodds
Kent C. Dodds(instructor)
~ 8 years ago

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

require('bootstrap/dist/css/bootstrap.css')