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