Angular Webpack SASS构建问题，一切编译都很好，然后我得到一个JS错误

我是webpack的新手，我正在用它来打包Angular 2 web应用程序。根据标题，我在JS中遇到了与SASS编译和ExtractTextPlugin相关的错误

以下是我的网页配置的相关摘录：

 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"
    }),
}

构建成功，我的服务器启动。但是，当我在浏览器中运行它时，我会收到以下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

起初，我试图让sourcemaps正常工作，结果证明这是一件非常痛苦的事情，但我用上面配置的所有最新包版本来管理它。原因是我可以使用resolve url loader进行相对文件导入，我怀疑这与此有关。。跳转到堆栈跟踪中，我看到此调用上面的以下注释失败：

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

如果现在添加url加载器，则会出现另一种错误：

Module build failed: ReferenceError: document is not defined

---

目前不知该怎么办。。。有人遇到过这些问题吗？如果您想了解更多信息，请告诉我。

我找到了我自己问题的答案

我使用Angular的新方法通过

@Component

decorator导入样式表，实际上是一个名为style_url_loader.js的小脚本，它是错误的罪魁祸首，Angular 2的核心部分。我不知道为什么会发生这样的错误，但在我看来，他们的做事风格是没有必要的，只要你能正确地定义你的CSS，就没有什么优势，也有一些劣势

因此，我很高兴地放弃了这一点，选择了require导入，例如，

conststyle=require（'./app.component.scss'）

，这立即解决了我的问题

---

希望这对别人有帮助

我找到了自己问题的答案

我使用Angular的新方法通过

@Component

decorator导入样式表，实际上是一个名为style_url_loader.js的小脚本，它是错误的罪魁祸首，Angular 2的核心部分。我不知道为什么会发生这样的错误，但在我看来，他们的做事风格是没有必要的，只要你能正确地定义你的CSS，就没有什么优势，也有一些劣势

因此，我很高兴地放弃了这一点，选择了require导入，例如，

conststyle=require（'./app.component.scss'）

，这立即解决了我的问题

希望这对别人有帮助