Webpack 4: SCSS to CSS into separate file

Question

I would like to use Webpack 4 to transpile on one side my ES6 Javascript separately from my Sass:

• src/js/index.js → static/js/index.js
• src/css/style.scss

Answer 1

Try mini-css-extract-plugin for webpack v4.

I created a separate webpack config file that looks like ...

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: './server/styles/styles.scss',
  output: {
    path: path.resolve(__dirname, 'public')
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "styles.css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.s?css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
}

Not sure why, but it's also generating a javascript file with the required css bundle.

Answer 2

extract-text-webpack-plugin does not play well with webpack 4.

According to Michael Ciniawsky:

extract-text-webpack-plugin reached a point where maintaining it become too much of a burden and it’s not the first time upgrading a major webpack version was complicated and cumbersome due to issues with it

mini-css-extract-plugin is here to overcome those issues.

see here for more information about this topic