# Setting up Webpack, Babel and React from scratch - Part 2

DevFeed: [Setting up Webpack, Babel and React from scratch - Part 2](<https://devfeed.tech/articles/setting-up-webpack-babel-and-react-from-scratch-part-2-37349.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/setting-up-webpack-babel-and-react-from-scratch-part-2/>)

Author: Stanko

Published: 2016-08-29T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [Webpack](<https://devfeed.tech/topics/webpack.md>), [Babel](<https://devfeed.tech/topics/babel.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [React](<https://devfeed.tech/topics/react.md>), [es6](<https://devfeed.tech/topics/es6.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [babel](<https://devfeed.tech/tags/babel.md>), [compiler](<https://devfeed.tech/tags/compiler.md>), [css](<https://devfeed.tech/tags/css.md>), [es6](<https://devfeed.tech/tags/es6.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [react](<https://devfeed.tech/tags/react.md>), [sass](<https://devfeed.tech/tags/sass.md>), [webpack](<https://devfeed.tech/tags/webpack.md>)

## AI overview

Part two of a tutorial on setting up Webpack, Babel, and React covers adding SASS support, source maps, Autoprefixer, hot reloading, and additional ES6 features such as static class properties and decorators.

## Source excerpt

Part two # Update: Part two is pretty much done. Part three will cover redux and production builds. Other parts: Part 1 - Webpack, Babel, React, Router, ESLint Part 2 - SASS, More ES6 goodness (Static props, decorators, deconstruction...) Part 3 - Where to go from here Adding SASS # We will use SASS loader for webpack, so let's install it together with node-sass compiler, css and style loaders npm install --save-dev style-loader css-loader sass-loader node-sass Create scss folder in the app folder, and main app.scss file in it. This file will include all of the other scss files. Now we need to add a loader to webpack config file. ... { test: /\.scss$/, loader: 'style!css!sass' } ... This will handle importing SCSS files in our JavaScript code. So we need to import app.scss manually in the JavaScript code. You'll need to add only one line to your app.js. import '../scss/app.scss'; This includes your styles by calling loaders we defined in the webpack config. Restart your webpack, and voala, now we have styles and hot reloading for them. Try changing your styles to check it. Source maps # To enable source maps, we'll pass the sourceMap option to the sass and the css loaders. Enable devtool, and update the loader ... devtool: 'inline-source-map', // or 'source-map' module: { loaders: [ ... { test: /\.scss$/, loader: 'style!css?sourceMap!sass?sourceMap', } ] } ... If you want to read more, here's link to the official documentation Autoprefixer # Always use autoprefixer - I can't stress this enough. We'll need postcss loader, precss and autoprefixer npm install --save-dev postcss-loader precss autoprefixer At the top of our webpack config, require precss and autoprefixer const precss = require('precss'); const autoprefixer = require('autoprefixer'); Update our sass loader config and and postcss config ... module: { loaders: [ ... { test: /\.scss$/, loader: 'style!css?sourceMap!postcss!sass?sourceMap', } ] }, postcss() { return [autoprefixer, precss]; }, ... Restart webpa