• 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:

    <span style="color: red;">Hello world</span>

    With React, styles are often commingled with component logic:

    const styles = {
      color: "red"
    };
    
    const HelloWorld = () = (
      <div style={styles}>Hello world</div>
    )

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

    SASS Without Webpack

    You can use parcel-bundler to bundle React projects without any configuration.

    npm i parcel-bundler --save
    npm i babel-preset-env babel-preset-react babel-plugin-transform-runtime babel-plugin-transform-class-properties --dev
    

    Then you can include sass by simply importing it:

    // Component.js
    
    import React from 'react'
    import './styles.scss';
    
    class MyComponent extends React.Component { ... }
    

    When building, parcel-bundler autodetects sass imports and will automatically install node-sass.  

    Using SASS With Webpack

    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

    npm i sass-loader node-sass webpack --save-dev

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

    npm i style-loader css-loader --save-dev

    Step 2. Include sass-loader in your Webpack config file

    module.exports = {
      entry: "./app/entry", // string | object | array
      // Here the application starts executing
      // and webpack starts bundling
      output: {
      // options related to how webpack emits results
        path: path.resolve(__dirname, "dist"), // string
        // the target directory for all output files
        // must be an absolute path (use the Node.js path module)
        filename: "bundle.js", // string
        // the filename template for entry chunks
      },
      module: {
        rules: [{
            test: /\.scss$/,
              use: [{
                loader: "style-loader"
              }, {
                loader: "css-loader" 
              }, {
                loader: "sass-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-loader.

    Step 3. Include the SASS file in a container component

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

    import React from 'react'
    import './style.scss'
    
    class App extends React.Component {
      render() {
        return(<div>Hello World</div>)
      }
    }

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

    |--app.js
    |--style.scss
    |--components/
    |--containers/

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

    @import 'buttons';
    @import 'modal';

    And so on.

    Resouces

    Complete Webpack Config Example For Sass

    var path = require('path');
    
    module.exports = {
      entry: './src/index.js',
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
      },
      module: {
        rules: [{
          test: /\.css$/,
            use: [
              'style-loader',
              'css-loader'
            ]
        }]
      }
    }