Adding Webpack Dev Server and Sass, Stylus, or LessCSS with React

In the last recipe, we added React to Webpack 4, and we split our Webpack configuration, but in the end, we were just able to build our bundle and run the application as a static page. In this recipe, we are going to add the Webpack Dev Server to run our React Application in an actual server and restart the server every time we make a change. Also, we are going to implement CSS preprocessors such as Sass, Stylus, and LessCSS.

Getting Ready

For this recipe, you will need to install the following packages:

npm install webpack-dev-servercss-loader [email protected] style-loader

If you want to use Sass in your project, you have to install:

npm install sass-loadernode-sass

If you prefer Stylus, you'll need the following:

npm install stylus-loader stylus

Or if you like LessCSS, install this:

npm install less-loader less

How to do it...

We will first add the Webpack Dev Server:

1. Once you installed the webpack-dev-server...