DevServer aborts running when there are errors in CSS / SASS

[ova2]

I run the Webpack DevServer with the command:

webpack-dev-server --config config/webpack.dev.js --display-error-details --inline

The config looks like

    module: {
       ...
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({
                fallbackLoader: "style",
                loader: "css"
            })
        }, {
            test: /\.scss/,
            loader: ExtractTextPlugin.extract({
                fallbackLoader: "style",
                loader: "css!postcss!sass"
            }),
            exclude: /^\_.*\.scss/
        },
    },
    postcss: function () {
        // try the jquery for browsers here - http://browserl.ist/
        return [autoprefixer({browsers: ['last 3 versions']})];
    },
    plugins: [
        ...
        new ExtractTextPlugin({
            filename: "[name].css"
        })
    ],
    devServer: {
        host: 'localhost',
        port: 3000,
        historyApiFallback: true,
        contentBase: 'dist/',
        watchOptions: {
            aggregateTimeout: 100,
            poll: 300
        },
        stats: {
            colors: true
        }
    }

Now, wenn I edit some SASS file and make any error (SASS gets invalid), the DevServer aborts running.

     [mXBz] ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/assets/css/vendor.scss 61.8 kB {0} [built]
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
C:\Projects\bpmn-editor-poc\node_modules\loader-runner\lib\LoaderRunner.js:90
                        throw e;
                        ^

TypeError: Cannot read property 'C:\Projects\bpmn-editor-poc\node_modules\extract-text-webpack-plugin' of null
    at C:\Projects\bpmn-editor-poc\node_modules\extract-text-webpack-plugin\index.js:257:27
    at C:\Projects\bpmn-editor-poc\node_modules\webpack\lib\Compilation.js:468:4
    at Array.forEach (native)
    at callback (C:\Projects\bpmn-editor-poc\node_modules\webpack\lib\Compilation.js:467:14)
    at Compilation.<anonymous> (C:\Projects\bpmn-editor-poc\node_modules\webpack\lib\Compilation.js:488:4)
    at C:\Projects\bpmn-editor-poc\node_modules\webpack\lib\Compilation.js:332:10
    at C:\Projects\bpmn-editor-poc\node_modules\async\lib\async.js:52:16
    at Object.async.forEachOf.async.eachOf (C:\Projects\bpmn-editor-poc\node_modules\async\lib\async.js:236:30)
    at Object.async.forEach.async.each (C:\Projects\bpmn-editor-poc\node_modules\async\lib\async.js:209:22)
    at Compilation.addModuleDependencies (C:\Projects\bpmn-editor-poc\node_modules\webpack\lib\Compilation.js:192:8)
    at Compilation.processModuleDependencies (C:\Projects\bpmn-editor-poc\node_modules\webpack\lib\Compilation.js:177:7)
    at Compilation.<anonymous> (C:\Projects\bpmn-editor-poc\node_modules\webpack\lib\Compilation.js:475:8)
    at C:\Projects\bpmn-editor-poc\node_modules\webpack\lib\Compilation.js:124:4
    at Array.forEach (native)
    at callback (C:\Projects\bpmn-editor-poc\node_modules\webpack\lib\Compilation.js:123:12)
    at C:\Projects\bpmn-editor-poc\node_modules\webpack\lib\Compilation.js:147:10

Can DevServer ignore errors in SASS / CSS files, continue running and refresh the browser when these files are ok again?

Many thanks in advance,

[SpaceK33z]

You should use ExtractTextPlugin.extract when you have more then one occurence of ExtractTextPlugin. See the extract-text-webpack-plugin docs.

Sidenote; this is not an issue in webpack-dev-server.

[ova2]

But I already use loader: ExtractTextPlugin.extract({...}). See my config above. The full part of the common config is here: https://github.com/ova2/bpmn-editor-poc/blob/master/config/webpack.common.js What is wrong here?

[SpaceK33z]

In your example I see that you're not doing it like the example in the extract-text-plugin says. Have you tried doing it like the example at the bottom of the page says?

[ova2]

I have tried as in the example of the extract-text-plugin (at the bottom) and it doesn't work. Have you a running example?

[ova2]

Ok, it works now after I've updated my webpack-dev-server. I've used an old version.

[SpaceK33z]

Awesome :).

[ova2]

Yes, just updated it from 1.14.1 to 2.1.0-beta.2 and happiness :-). Errors in SASS / CSS files are shown in the console and the server keeps running without abort. Error corrected --> page gets automatically refreshed. Awesome.