Webpack 4 config.js (SCSS to CSS and Babel) 👌 The Simplest Usage 👌

package.json

{
  "name": "webpack-sass",
  "version": "1.0.0",
  "scripts": {
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack -p"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.11",
    "node-sass": "^4.8.3",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.20.3",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "^3.1.1"
  }
}

webpack.config.js

/* === dont forget to import scss to main.js file === */
/* ===> import './main.scss'; <=== */

var path = require("path");

module.exports = {
  entry: "./main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/dist"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: { presets: ["es2015"] }
        }
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: "style-loader" // creates style nodes from JS strings
          },
          {
            loader: "css-loader" // translates CSS into CommonJS
          },
          {
            loader: "sass-loader" // compiles Sass to CSS
          }
        ]
      }
    ]
  }
};

Thanks, just what I was looking for. Ended up with the below Webpack config.

`/* eslint-disable import/no-extraneous-dependencies /
/ eslint-disable arrow-body-style /
/ eslint-disable no-unused-vars */

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const bundleExtractPlugin = new ExtractTextPlugin({
filename: 'css/bundle.css',
});

const vendorsExtractPlugin = new ExtractTextPlugin({
filename: 'css/vendors.css',
});

module.exports = (env) => {
return {
name: 'client',
target: 'web',
entry: ['./src/client/app.jsx'],
output: {
path: path.resolve(__dirname, 'public'),
filename: 'js/bundle.js',
},
module: {
loaders: [
{
test: [/.js$|.jsx$/],
exclude: [/node_modules/],
loader: 'babel-loader',
options: {
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-0', 'react'],
},
},
{
test: /.scss$/,
exclude: [/node_modules/],
use: bundleExtractPlugin.extract({
use: ['css-loader', 'sass-loader'],
}),
},
{
test: /.css$/,
exclude: [/node_modules/],
use: vendorsExtractPlugin.extract({
use: ['css-loader'],
}),
},
],
},
stats: {
colors: true,
},
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({
SOCKET_URL: JSON.stringify(process.env.SOCKET_URL ? process.env.SOCKET_URL : 'wss://localhost:3000'),
}),
bundleExtractPlugin,
vendorsExtractPlugin,
],
};
};
`

@blairg Hey!

I updated the gist for Webpack 4 and tested. You can try again with Webpack 4! ✨

@blairg is your config compatible with webpack 4 ?
and @mburakerman can i ask how to properly separate the style from the bundle, because am facing lots of issue with the combination: webpack 4 + extract-text-webpack-plugin, that would be very helpful

@ZibanPirate try installing extract-text-webpack-plugin@next. That should solve compatibility issues.

Worked great for me, thx!

Uhm, I think this https://github.com/webpack-contrib/mini-css-extract-plugin is suggested for Webpack 4 and having separate CSS files.

@gkatsanos thx! working

thx! it's working!

./ClientApp/css/index.scss 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.

@import './variables.scss';
| @import './mixin.scss';
| @import './transition.scss';
@ ./ClientApp/boot-app.js 12:0-26
@ multi event-source-polyfill webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot-app.js

Please haelp me

Thanks mate! 👏

For people experiencing a weird bug when running Webpack, you need to get the new Webpack-CLI with npm i webpack-cli@^3.1.1 -D.

If you want you can read more about it here.

i am just wondering whether this is the best practice to inject stylesheet into js.

I want to get output about multiple css file and multiple js file when I entry that files
What should I do about webpack config ?
please help me

I was thinking the same thing as @zilahir

Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type.

Halp!

Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type.

I just came across this myself. Originally I was only importing scss but then I added an iconfont css file and I started seeing this. I updated the test regex to the following and then it worked:

// webpack.config
 {
        test: /\.(s*)css$/, // match any .scss or .css file, 
        use: [
          "style-loader", 
          "css-loader", 
          "sass-loader" 
        ]
      },

I am not an expert with webpack but I believe if you add something similar to the above or maybe even just adjust the regex here it might help.

Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type.

Module parse failed: Unexpected character '@' (4:0) You may need an appropriate loader to handle this file type.

thanks , working.

Thanks so much. It is work for webpack 4.35.3

I am using GITHUB-LINK as a setup for webpack4 with scss, lazyloading, devserver. Working with the latest webpack version.

Cheers