Sass webpack implementation

sass-webpack.js

const { MiniCSSExtractPlugin } = require('mini-css-extract-plugin');
const jsonImporter = require('node-sass-json-importer');
const sassCoreResources = require('./sassCoreResources');

module.exports = (env, argv) => {
  const { mode } = argv;
  const isProd = 'production' === mode;

  return {
    plugins: [
      // ... other plugins go here.
      new MiniCSSExtractPlugin({
        filename: '[name].[hash].css',
        chunkFilename: '[id].[hash].css',
      }),
    ],
    module: {
      rules: [
        // ... other loader rules go here.
        {
          test: /\.s[ac]ss$/,
          use: [
            MiniCSSExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                url: true,
                importLoaders: 1,
                // Allows usage of CSS modules in your react components.
                modules: {
                  mode: 'local',
                  localIdentName: '[name]__[local]--[hash:base64:5]',
                },
                sourceMap: ! isProd,
                localsConvention: 'camelCase',
              },
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: ! isProd,
                sassOptions: {
                  // Allows you to import JSON files (like variables) into your sass.
                  // See https://github.com/pmowrer/node-sass-json-importer
                  importer: jsonImporter(),
                },
              },
            },
            /** 
             * Allows you to supply utilities, variables, etc. used in all your
             * other sass files automatically via webpack.
             * 
             * See https://github.com/shakacode/sass-resources-loader
             */
            {
              loader: 'sass-resources-loader',
              options: {
                resources: sassCoreResources,
              },
            },
          ],
        },
      ],
    },
  };
};

/**
 * Example usage of CSS modules stylesheets your components.
 * See https://webpack.js.org/loaders/css-loader/#modules
 * 
 * `styles` is an object containing a mapping of classnames defined in your
 * stylsheet to a localized (hashed) version of that class for use in your component.
 * 
 * Example: { wrapper: 'myComponentStyles__wrapper__1h2837' }
 * 
 * This ensures that classnames for this component will never clash with those
 * of other components (eg. you can use `wrapper` as a classname in every component's stylesheet).
 */
import React from 'react';
import styles from './myComponentStyles.scss';

const MyComponent = () => (
  <div className={styles.wrapper}>
    This is a test!
  </div>
);

export default MyComponent;