dev-toolkit/dist/generated-templates/skipped-comments/with-sass/dev-toolkit.config.js

Universal Development Toolkit for React Veterans

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');

const cssChunkNaming = '[name]__[local]___[hash:base64:5]';

const projectDirectory = process.cwd();
const clientFolder = path.resolve(projectDirectory, 'src/client');
const includePaths = [clientFolder];

const sassLoaders = [
  `css-loader?modules&importLoaders=1&localIdentName=${cssChunkNaming}`,
  'postcss-loader',
  {
    loader: 'sass-loader',
    options: { includePaths: includePaths },
  },
];

module.exports = {
  cssChunkNaming: cssChunkNaming,
  includePaths: includePaths,

  devToolkit: {},

  webpack: {
    rules: options => {
      return [
        {
          test: /\.scss$/,
          use: options.creatingBuild
            ? 
              ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: sassLoaders,
              })
            : 
              [{ loader: 'style-loader' }].concat(sassLoaders),
        },
      ];
    },

    plugins: options => {
      const cssFileToGenerate = options.namingConvention + '.css';
      return options.creatingBuild
        ? [new ExtractTextPlugin({ filename: cssFileToGenerate, allChunks: true })]
        : [];
    },

    customize: (webpackConfig, options) => ({
      ...webpackConfig,
    }),
  },
};