Adding Sass

I like using sass so I can import styles from node_modules and all stuff.

• Add sass-loader and node-sass to the project.
  • yarn add node-sass -D
  • yarn add sass-loader
• Create a new file style.scss in src/ dir.

style.scss

$dark-gray: #444;
$font-family: sans-serif;

.title {
  font-size: 40px;
  color: $dark-gray;
  font-family: $font-family;
}

• import style.scss into index.js

index.js

import 'style.scss'
// rest of the code

• Add sass-loader to webpack.config.js

webpack.config.js

const path = require('path')
   const webpack = require('webpack')
   const hotModuleScript = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000'

   module.exports = {
    mode: 'development', /* Let webpack know we are in development */
    entry: {
      bundle: [hotModuleScript, './src/index.js']
    },
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, 'dist'),
      publicPath: '/'
    },
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            {loader: 'style-loader'},
            {loader: 'css-loader'},
            {
              loader: 'sass-loader',
              options: {
                includePaths: [
                  path.resolve(__dirname, 'node_modules')
                ]
              }
            }
          ]
        }
      ]
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoEmitOnErrorsPlugin()
    ]
   }

The options are not required but this one lets you import files from node_modules like...

      @import 'bulma/bulma' 
      // gets bulma.sass from node_modules/bulma/