Webpack CSS loaders

wepack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = (env = { production: false }) => ({
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          ...(env.production
            ? [{ loader: MiniCssExtractPlugin.loader }]
            : ['style-loader']),
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              localIdentName: env.production
                ? '[hash:base64:8]'
                : '[name]__[local]',
              modules: true,
              sourceMap: !env.production,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                require('postcss-preset-env')({
                  features: {
                    'custom-media-queries': true,
                    'nesting-rules': true,
                  },
                  importFrom: path.resolve(
                    __dirname,
                    'src/styles/variables.css',
                  ),
                  preserve: false,
                }),
              ],
              sourceMap: !env.production,
            },
          },
        ],
      }
    ],
  },
  plugins: [
    ...(env.production
      ? [
          new MiniCssExtractPlugin({
            filename: env.production
              ? '[name].[chunkhash:8].css'
              : '[name].css',
          }),
          new OptimizeCssAssetsPlugin(),
        ]
      : []),
  ],
});