Webpack SASS构建问题，一切都可以正常编译，然后出现JS错误 [英] Webpack SASS build issue, everything compiles fine, then I get a JS error

问题描述

我是webpack的新手，并且正在使用它打包Angular 2 Web应用程序.按照标题，我遇到了与SASS编译和ExtractTextPlugin有关的JS错误.

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.

以下是我的Webpack配置中的相关摘录:

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

构建成功，并且我的服务器启动.但是，当我在浏览器中运行它时，会收到以下erorr:

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

最初，我为使Sourcemaps工作而ash之以鼻，事实证明这确实很痛苦，但我使用上述配置使用所有最新的软件包版本进行了管理.原因是我可以使用resolve-url-loader进行相对文件导入，我怀疑与此有关..跳转到堆栈跟踪中，我在此调用上方看到以下注释失败了:

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
 */

如果我现在添加url-loader，则会收到另一种错误:

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

推荐答案

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

I discovered the answer to my own question.

我正在使用Angular的新方法通过@Component装饰器导入样式表，实际上这是一个名为style_url_loader.js的小脚本，它是错误的元凶，是Angular 2的核心部分.我没有知道发生错误的原因为什么，但是在我看来，如果您适当地调整CSS的范围，就没有好处，也有一些缺点.

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，我很乐意将其关闭，并选择了要求进口的产品，例如const style = require('./app.component.scss')，立即解决了我的问题.

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构建问题，一切都可以正常编译，然后出现JS错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！