webpack scss config

core.scss

@import '~react-select/dist/react-select.css';

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 13px;
}

body>#root {
  width: 100%;
}

css.js

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

const {postcssLoader} = require('./postcss')
const {sassLoader} = require('./sass')
const {paths, __DEV__} = require('../env')


const extractCssPlugin = new ExtractTextPlugin({
  filename  : '[id].css',
  allChunks : true,
  disable   : __DEV__,
})

const cssLoader = {
  loader  : 'css-loader',
  options : {
    sourceMap : true,
    minimize  : false,
  },
}
const cssModulesLoader = {
  ...cssLoader,
  options: {
    ...cssLoader.cssOptions,
    modules        : true,
    importLoaders  : 1,
    camelCase      : true,
    localIdentName : '[name]_[local]_[hash:base64:5]',
  },
}

// Add any packge names here whose styles need to be treated as CSS modules.
// These paths will be combined into a single regex.
const treatCssModules = [
  'compass-mixins',
]
const noCssModulesRegex = /core.scss$/

treatCssModules.push(
  paths.client().replace(/[\^\$\.\*\+\-\?\=\!\:\|\\\/\(\)\[\]\{\}\,]/g, '\\$&') // eslint-disable-line
)
const cssModulesRegex = new RegExp(`(${treatCssModules.join('|')})`)

const cssRules = [{
  test    : /\.(scss|sass)$/,
  include : cssModulesRegex,
  exclude : [noCssModulesRegex],
  use     : extractCssPlugin.extract({
    use: [
      cssModulesLoader,
      postcssLoader,
      sassLoader,
    ],
    fallback: 'style-loader',
  }),
}, {
  test    : /\.css$/,
  include : cssModulesRegex,
  exclude : [noCssModulesRegex],
  use     : extractCssPlugin.extract({
    use: [
      cssModulesLoader,
      postcssLoader,
    ],
    fallback: 'style-loader',
  }),
}, {
  test    : /\.(scss|sass)$/,
  include : [noCssModulesRegex],
  use     : extractCssPlugin.extract({
    use: [
      cssLoader,
      postcssLoader,
      sassLoader,
    ],
    fallback: 'style-loader',
  }),
}, {
  test    : /\.css$/,
  include : [noCssModulesRegex],
  use     : extractCssPlugin.extract({
    use: [
      cssLoader,
      postcssLoader,
    ],
    fallback: 'style-loader',
  }),
}]

const cssPlugins = [
  extractCssPlugin,
]

module.exports = {
  cssPlugins,
  cssRules,
  extractCssPlugin,
  cssLoader,
  cssModulesLoader,
}

postcss.js

const cssnano = require('cssnano')

const postcssOptions = {
  plugins: [
    cssnano({
      autoprefixer: {
        add      : true,
        remove   : true,
        browsers : [
          'android >= 4.4.3',
          'chrome >= 57',
          'edge >= 14',
          'firefox  >= 52',
          'ios >= 10',
          'safari >= 10',
        ],
      },
      discardComments: {
        removeAll: true,
      },
      discardUnused : false,
      mergeIdents   : false,
      reduceIdents  : false,
      safe          : true,
      sourcemap     : true,
    }),
  ],
  sourceMap: true,
}

const postcssLoader = {
  loader  : 'postcss-loader',
  options : postcssOptions,
}

module.exports = {
  postcssOptions,
  postcssLoader,
}

sass.js

const {paths} = require('../env')

const sassOptions = {
  includePaths : [
    paths.client('styles'),
    'node_modules',
  ],
  sourceMap: true,
}

const sassLoader = {
  loader  : 'sass-loader',
  options : sassOptions,
}

module.exports = {
  sassLoader,
  sassOptions,
}