Compile plain SCSS with Webpack

webpack.config.js

// Easily compile plain SCSS or SASS if you want to use Webpack 
// but you're not working on a JS project (React, Typescript, whathaveyou)
//
// Why? Webpack does what Grunt/Gulp does with half the configuration.
// See: https://alligator.io/tooling/webpack-gulp-grunt-browserify/
//
// You will need:
//    npm install --save-dev autoprefixer
//    npm install --save-dev css-loader
//    npm install --save-dev file-loader
//    npm install --save-dev mini-css-extract-plugin
//    npm install --save-dev sass
//    npm install --save-dev sass-loader
//    npm install --save-dev style-loader
//    npm install --save-dev webpack webpack-cli
//
// In package.json:
//  "scripts": {
//    "build": "webpack --config webpack.config.js"
//  },
// 
// Run this: npm run build
//
// Input: main.scss in a sass folder
// Output: style.css file in a public/css folder.

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

module.exports = {
  entry: './sass/main.scss',
  output: {
    path: path.resolve(__dirname, 'public/css')
  },
  module: {
    rules: [
      // Extracts the compiled CSS from the SASS files defined in the entry
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: "css-loader",
            options: {
              importLoaders: 2
            }
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ],
  },
  plugins: [
    // Where the compiled SASS is saved to
    new MiniCssExtractPlugin({
      filename: 'style.css',
      allChunks: true,
    })
  ],
};