Being a newcomer to webpack, I am currently using it to package an Angular 2 web application. However, I am encountering errors related to SASS compilation and the ExtractTextPlugin while working on my project.
Here is a snippet from my webpack configuration that might be relevant:
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"
}),
}
Even though the build process is successful and the server starts without any issues, upon launching the app in the browser, I encounter the following error message:
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, my struggle was getting sourcemaps to work correctly, which required tweaking package versions. The main reason for needing this was to utilize resolve-url-loader for relative file imports, which could potentially be causing this issue. While inspecting the stack trace, I noticed the following comment above the problematic code:
/**
* Rewrites stylesheets by resolving and removing the @import urls that
* are either relative or don't have a `package:` scheme
*/
Upon attempting to add url-loader to address this problem, I encountered a different error:
Module build failed: ReferenceError: document is not defined
At the moment, I am unsure of how to proceed. Has anyone faced similar challenges before? Any additional insights or information would be greatly appreciated.