Webpack 4: Mini-CSS-Extract-Plugin + Sass-Loader + Splitchunks

webpack 4 SASS issue

I've been at this for awhile and I knew the moment I'd post this question, I'd find a right combo. I needed a couple additional options to the css-loader. Found the solution here.

This webpack-config.js worked for me (note: I had to change the output folder so the sass didn't get compiled in the js folder)

const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: ['./js/app.js', './sass/style.scss'],
  plugins: [
    new UglifyJSPlugin(),
    new MiniCssExtractPlugin({
      filename: 'style.min.css',
      chunkFilename: "[name].css"
    })
  ],
  output: {
    filename: 'app-compiled.min.js',
    path: path.resolve(__dirname, 'assets')
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader:'css-loader',
            options: { url: false, sourceMap: true }
          },
          'sass-loader'
        ]
      },
    ]
  }
};

Webpack erroring on mini-css-extract-plugin loader

I understand getAssets is only available since webpack 4.40.0 https://webpack.js.org/api/compilation-object/#getassets

You could try:

1. Update webpack version to at least 4.40.0
2. Downgrade min-css-extract-plugin to 1.3.0

I tried the second one, and worked for me, but upgrading webpack should work too.

webpack4 mini-css-extract-plugin with bourbon

This turns out to be an issue with sass-loader version 7.x . I changed sass-loader dependency back to 6.0.7 and it started working like charm. Here is the stackoverflow thread which helped

Angular 2 Node Bourbon Error

---

Related Topics