Style React Application – apply SCSS/CSS files to React with Webpack

https://grokonez.com/frontend/react/how-to-add-style-react-application-webpack

Style React Application – apply SCSS/CSS files to React with Webpack

In this tutorial, we're gonna look at how to style a React Application (apply SCSS/CSS files to React Application) with Webpack.

Related Posts:

• Build & run React Application with Webpack – React Webpack example
• React Modal example

Goal

We had created a React Application like this:

Today we will know way to decorate it:

How to

Install Packages

We need style-loader, css-loader, sass-loader, node-sass for applying CSS, SCSS file:

{
  ...
  "dependencies": {
    ...
    "style-loader": "0.20.3",
    "css-loader": "0.28.11",
    "sass-loader": "6.0.7",
    "node-sass":"4.8.3"
  }
}

Run cmd yarn install to add these packages to our application.

Configure Webpack

More at:

https://grokonez.com/frontend/react/how-to-add-style-react-application-webpack

Style React Application – apply SCSS/CSS files to React with Webpack