Webpack SASS build issue, everything compiles fine, then I get a JS error

Question

I'm new to webpack, and I'm using it to package an Angular 2 web app. As per title, I'm having issues with errors in JS relating to SASS compilation and the ExtractTextPlugin.

Here are the relevant excerpts from my webpack configuration:

 module: {
    rules: [{
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({
            fallbackLoader: ['style-loader'],
            loader: [{
                loader: 'css-loader?sourceMap',
                options: {
                    sourceMap: true
                }
            }, {
                loader: 'sass-loader?sourceMap&output=compressed',
                options: {
                    sourceMap: true
                }
            }]
        })
    }]

    new ExtractTextPlugin({
        filename: "style.css"
    }),
}

The build succeeds, and my server starts. However, when I run it in the browser, I receive the following erorr:

Uncaught TypeError: cssText.replace is not a function
    at extractStyleUrls (http://localhost:3000/vendor.bundle.js:32923:35)
    at http://localhost:3000/vendor.bundle.js:19549:136

Initially I was bashing my head trying to get sourcemaps working, it proved to be a real pain but I managed it with all latest package versions with the above config. The reason was so that I could use resolve-url-loader for relative file imports, which I suspect is related to this.. jumping into the stack trace I see the following comment above this call that is failing:

/**
 * Rewrites stylesheets by resolving and removing the @import urls that
 * are either relative or don't have a `package:` scheme
 */

If I do add the url-loader now, I get a different kind of error:

Module build failed: ReferenceError: document is not defined

Currently at a loss as to what to do... has anyone encountered these issues? Please let me know if you would like any more information

score 4 · Accepted Answer · answered Dec 02 '16 at 16:59

I discovered the answer to my own question.

I was using Angular's new method for importing stylesheets via the @Component decorator, and it was in actual fact a small script called style_url_loader.js which was the culprit of the error, a core part of Angular 2. I have no idea why that error occurred, but in my opinion there's no need for their style of doing things, provided you scope your CSS properly there's no advantage and there is some disadvantage.

Ergo, I happily switched that out and opted for require imports, e.g. const style = require('./app.component.scss'), which instantly resolved my issue.

Hope this helps somebody!

Webpack SASS build issue, everything compiles fine, then I get a JS error

1 Answers1

Linked