Whats the point of loading your CSS into Webpack?

Question

When using Webpack, it makes complete sense to use it to package your client-side JS. But what is the purpose of using it to compile your SASS and load your CSS into your page? In the end it appears that you need to use another Webpack plugin (ExtractTextWebpackPlugin) in order to pull out the CSS when you are ready to deploy to production.

It seems like you are going full circle here. Before Webpack you load your CSS in the <head> using a <link> tag like normal. Now using Webpack you load it via your JS bundle. And now for production you use a Webpack plugin to put it right back into the <head> tag again. So what's the point?

There are already dozens of tools and methods for compiling your CSS and live-reloading it in the page without Webpack. What is the advantage of using Webpack for your SASS/LESS/CSS to begin with?

And you actually made me type. I have a keyboard shortcut set up for telling people "Welcome to stack overflow, here's how to ask", but you have 36k rep, so that won't work :) — yaakov
– yaakov, Commented Mar 26, 2018 at 2:42
Sorry you are right I should have asked elsewhere. Not the right place. — Jake Wilson
– Jake Wilson, Commented Mar 26, 2018 at 3:03

wsfuller · Accepted Answer · 2018-03-26 02:53:26Z

1

tl;dr I don't think you are looking at Webpack in its' full capacity. If you are hung up on just working with CSS preprocessors than just stick with their stand alone compliers and move on.

Webpack only reads JavaScript, so that's where Loaders come into play. When you want to start working with other file types you'll need to configure loaders to pull out the specific code and have it run the necessary tasks. It's no different than Gulp's Pipelines or Grunt's Configuration blocks.

The point of loading CSS (or any preprocessor) into Webpack is because you want to have a full fledge task runner that handles bundling your code, live-reloading, image optimization, environment variables, code optimizations, HTML templates, among everything else that's possible. You wouldn't just use Webpack as a standalone CSS Preprocessor that's not the objective.

answered Mar 26, 2018 at 2:53

wsfuller

1,8408 gold badges33 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jake Wilson Over a year ago

Okay but in the end your CSS needs to be pulled out of Webpack again for a production website. Seems kind of weird to put it in and then have to pull it out again. Why not just leave it out to begin with? Like what is the advantage here? I feel like I'm missing something.

wsfuller Over a year ago

Regardless of the environment Webpack can't natively support CSS or any preprocessor. I feel like you're hung up on making a reference with Webpack, Webpack then uses a loader for processing, and then puts the file back in place ready for production. Essentially there's no real advantage in this scenario (please correct if wrong). But, I've solely used Webpack for decent sized React applications so experiences may vary. Honestly I feel like you'd be better served using Gulp for your needs. It's fast, simple, and probably the quickest way to get up and running.

Collectives™ on Stack Overflow

Whats the point of loading your CSS into Webpack?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related