Styling components in React has gotten a bit weird recently.

Remember back in the day when people would talk about the separation of style (css), content (html) and logic (js, php etc)? This was used as an argument against inline styles like the following:

With React, styles are often commingled with component logic:

But you can achieve some degree of separation by keeping presentational, pure components separate from container components.

## Using SASS With React

I’m a big fan of SASS. The idea of programmatic CSS is pretty sexy.

Here’s how to use SASS with React and Webpack in three easy steps.

### Step 1. Install sass-loader

You’ll also need style-loader and css-loader:

### How It Works:

• module: { rules: [{ test: /.scss\$/ }] }. Webpack uses a regular expression to determine which files it should look for and serve to a specific loader. In this case any file that ends with .scss will be served to sass-loader first (sass to css), then css-loader, and finally style-laoder.

### Step 3. Include the SASS file in a container component

Usually, you’d include the SASS file in the entry component for your app.

This is a assuming you have a directory structure like this:

Per usual, in style.scss you can import your other sass files like so:

And so on.