css-loader will help us with that.įinally, when we import our bundle.js created by webpack, we will need some instructions inside that bundle in order to import those javascript styles into real CSS again. Remember that webpack produces a bundle.js file? Well, at the end of the day, everything needs to be JavaScript. This loader will transform our CSS into CommonJS, yes you read it well, CSS into JavaScript. Then, after we have our CSS hot and ready we will pass it to the next player which is our css-loader.

In order to make LibSass to work with our node app, we will need node-sass. Internally scss-loader will need a sass compiler obviously, that compiler is written in C++ and is called LibSass. Whenever webpack detects a scss or sass file it will process it with several loaders.įirst we have scss-loader which it’s only task is to compiles sass into CSS. First I’ll try to explain how those libraries work, and then we will inject them into our webpack configuration. We will need sass-loader, node-sass, css-loader, and style-loader.

If you already have your project, keep reading. If you are here without reading the previous post, I would recommend you to go ahead and read with, worst case scenario you will learn something new. I todays article I will teach you how to integrate Sass for doing the styling on the app. In previous posts we have been configuring Webpack / React / Babel and webpack-dev-server in order to run a very basic application.

Webpack documentation basic setup