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:

react-note-app-goal

Today we will know way to decorate it:

react-add-styles-example-result

How to

Install Packages

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

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

Configure Webpack

Create Styles

react-add-styles-example-create-styles

styles.scss imports all scss/css files:

base/settings.scss contains global variables for styling colors or size:

base/base.scss is for base configuration such as font or background:

– Each Component has corresponding SCSS file inside components folder.
– We also have container.scss and button.scss for useful class items that may be used frequently.

Add Styles to Components

To use the styles that we create in SCSS/CSS files, just put it as className HTML attribute.
For example:

In app.js, import styles.scss:

Source code

ReactAddStyle

For running:
yarn install
yarn run dev-server or yarn run build, then yarn run serve.

By JavaSampleApproach | April 8, 2018.

Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*