Simple Webpack 4 Compile SCSS to CSS config with autoprefix and minify

package.json

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "Simple SCSS complie with autoprefix and minify",
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "autoprefixer": "^9.0.0",
    "breakpoint-sass": "^2.7.1",
    "css-loader": "^2.0.0",
    "cssnano": "^4.0.5",
    "node-sass": "^4.9.0",
    "mini-css-extract-plugin": "^0.5.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.0.1",
    "style-loader": "^0.23.1",
    "webpack": "^4.6.0",
    "webpack-cli": "^3.0.0"
  }
}

webpack.config.js

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

// Hard code this to production but can be adapted to accept args to change env.
const mode = 'production';

module.exports = {
  mode,

  output: {
    // Webpack will create js files even though they are not used
    filename: '[name].bundle.js',
    chunkFilename: '[name].[chunkhash].chunk.js',
    // Where the CSS is saved to
    path: path.resolve(__dirname, 'css'),
    publicPath: "/css"
  },

  resolve: {
    extensions: ['.css', '.scss'],
    alias: {
      // Provides ability to include node_modules with ~
      '~': path.resolve(process.cwd(), 'src'),
    },
  },

  entry: {
    // Will create "styles.css" in "css" dir.
    "styles": './scss/my-styles.scss',
  },

  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          // Extract and save the final CSS.
          MiniCssExtractPlugin.loader,
          // Load the CSS, set url = false to prevent following urls to fonts and images.
          { loader: "css-loader", options: { url: false, importLoaders: 1 } },
          // Add browser prefixes and minify CSS.
          { loader: 'postcss-loader', options: { plugins: [autoprefixer(), cssnano()] }},
          // Load the SCSS/SASS
          { loader: 'sass-loader' },
        ],
      },
    ],
  },

  plugins: [
    // Define the filename pattern for CSS.
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    })
  ]
}

Run above with npm run build

👍

Great.

Thanks, this helped me! it just works!

If someone runs into an issue with the postcss-loader in a new version of webpack - this is the fix:
Replace Line 44 with:

options: { postcssOptions: { plugins: [autoprefixer(), cssnano()], }, },

Thanks! ATM works fine 👍

This has saved me thank you! However, it appears to generate a javascript file for each scss file you process, any way to stop that?

@timhasler try https://github.com/gregnb/filemanager-webpack-plugin

Tnx a lot sir <3

Thanks, this helps a lot :)

Nice. Thanks.