Module parse failed unexpected token when using Webpack 4 with extract-text-plugin

Question

I have read every possible configuration under the sun regarding Webpack 4 to bundle .scss files into .css files.

Nothing is working for me.

Here is my webpack configuration:

var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var MiniCssExtractPlugin = require('mini-css-extract-plugin');

var absDirPath = __dirname;

module.exports = {
    mode: 'development',
    entry: [
        path.join(absDirPath + '/src/assets/main.scss')
    ],
    output: {
        path: path.join(absDirPath + '/dist'),
        filename: 'bundle.css',
        publicPath: './',
    },
    plugins: [
        new ExtractTextPlugin('bundle.css')
    ],
    module: {
        rules: [
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                include: path.join(absDirPath + '/src/assets/*.scss'),
                use: ExtractTextPlugin.extract({
                    use: ['sass-loader', 'css-loader]
                })
            }
        ]
    }
}

Here is my .scss file:

html, body {
  width: 100%;
  height: 100%;
}

Here is my package.json

{
  "name": "webpack-sass",
  "version": "0.0.1",
  "scripts": {
    "build": "webpack"
  },
  "dependencies": {
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "4.0.0-beta.0",
    "mini-css-extract-plugin": "^0.4.1",
    "node-sass": "",
    "raw-loader": "^0.5.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.22.1",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0"
  }
}

And here is the error that I get

Hash: da6dbe80b661e11c34ed
Version: webpack 4.16.5
Time: 87ms
Built at: 08/14/2018 2:03:36 AM
     Asset      Size  Chunks             Chunk Names
bundle.css  4.41 KiB    main  [emitted]  main
Entrypoint main = bundle.css
[./src/assets/main.scss] 185 bytes {main} [built] [failed] [1 error]
[0] multi ./src/assets/main.scss 28 bytes {main} [built]

ERROR in ./src/assets/main.scss 1:11
Module parse failed: Unexpected token (1:11)
You may need an appropriate loader to handle this file type.
> html, body {
|   width: 100%;
|   height: 100%;
 @ multi ./src/assets/main.scss main[0]

npm ERR! Windows_NT 10.0.16299
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
npm ERR! node v6.8.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script 'webpack'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the webpack-sass package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs webpack-sass
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls webpack-sass
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:

On top of that, the bundle.css is a js file output as bundle.css

What I have tried so far:

1. Using style-loader

2. Using the combination of the loaders:

   use: [ 'sass-loader', 'style-loader', 'css-loader' ]

3. The MiniCssExtractPlugin

4. Tried on node 6.8.1 as well as 8.x

But I get the same error. Earlier I used to get Module build failed because of loader ambiguity; which got resolved by the include key.

I am banging my head on the wall since 4 days now. It was way easier with grunt.

Can you please share a link of a working example. The Github threads are just people bullshitting without any working example.

Answer 1

I had to change from

{test: /\.css$/, use: [ 'style-loader','css-loader', 'sass-loader'] }

to

{test: /\.s[ac]ss$/, use: [ 'style-loader','css-loader', 'sass-loader'] }   

to get it working. Webpack was testing .css files against the loader while infact I was importing .scss file, so my bad.

Answer 2

I'm having the same problem. I don't have a solution yet, but I did notice that the order of your loaders seems incorrect. I believe the loaders are read from right to left, so maybe change:

use: [ 'sass-loader', 'style-loader', 'css-loader' ]

to:

use: [ 'css-loader', 'style-loader', 'sass-loader' ]

Good luck! I'd be interested to hear of any solution you find.

Answer 3

I know this is a bit of an old one, but I hit the same problem even with the loaders in the correct order in my dev config. I know what fixed it for me, but I don't know the why!

I ran a production build, which worked. I immediately re-tried the dev config (without changing anything) and it then started working.

My first assumption was that I had incorrectly setup my dev config to rely on something in the dist folder, so as a follow-up test I deleted the generated files in my dist folder and re-tried the dev config...but it stilled worked.

As far as I can tell the process of running a production build hooks something together necessary for the dev build to work.

I'm not yet sure what that hook is but once (if) I do I will add it here.

Answer 4

Okay, my bad. The idea of webpack is to covert .scss files to .css format on the fly. The .css files come into picture when the .scss are imported in the js files. There are no physical .css files. The loader would only load the .scss files and provide the .css runtime.