为Angular 2设计的ExtractTextPlugin在webpack中

Question

我有一个使用Angular的webpack的工作配置，以便将scss文件插入到bundle.js中。

{
  test: /\.scss$/,
  use: ['raw-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
}

但是，我想要获得一个包含应用程序中所有scs的css文件，所以我像这样使用ExtractTextPlugin

{
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
    fallback: ['raw-loader', 'resolve-url-loader', 'sass-loader?sourceMap'],
    use: ['resolve-url-loader', 'sass-loader?sourceMap']
  })
}

现在，我不再使用'raw-loader‘，因为我知道这些文件不需要插入到bundle.js中，但是我在编译时遇到了错误。

ERROR in ./~/resolve-url-loader!./~/sass-loader/lib/loader.js?sourceMap!./app/app.component.scss
    Module parse failed: /Users/david/Documents/work/my-angular-seed/node_modules/resolve-url-loader/index.js!/Users/david/Documents/work/my-angular-seed/node_
modules/sass-loader/lib/loader.js?sourceMap!/Users/david/Documents/work/my-angular-seed/app/app.component.scss Unexpected token (1:0)
    You may need an appropriate loader to handle this file type.
    | .app {
    |   border: 1px solid red;
    | }

如果我使用raw-loader，构建可以正常进行，但是在加载index.html时会出现错误

Uncaught Error: Expected 'styles' to be an array of strings.

有没有人知道如何解决这个问题以及为什么会发生这种情况？谢谢!

编辑

我已经检查了更多，我想我知道问题是什么，但我不知道如何解决它。

如果我使用这个配置

{
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'sass-loader']
  })
}

app.css已生成，因此一切正常。但是如果我检查一下bundle.js，这个组件已经转换成了这个

AppComponent = __decorate([
    core_1.Component({
        selector: 'app-root',
        styles: [__webpack_require__(23)],
        template: "\n    <div class=\"app\">\n      Hello!\n    </div>\n  "
    })
], AppComponent);

如果我检查模块23，我会发现它是空的

/* 23 */
/***/ (function(module, exports) {

// removed by extract-text-webpack-plugin

/***/ }),

所以我猜这就是angular抱怨的，styles是一个空数组。我认为这里应该做的是完全删除style标签，因为css是作为外部分离文件使用的，对吧？有没有办法解决这个问题？

Answer 1

您可以使用css-loader，它通常通过raw-loader用于CSS。而fallback是在不提取CSS时使用的加载器(如extract options中所述)。除了在<style>标签中插入CSS的style-loader之外，我想不出其他的用法。在此之前，您在use中指定的加载器仍然适用，因此使用raw-loader实际上不会有任何效果。

您可以将.scss规则更改为以下常见规则(类似于Extracting Sass中的示例)：

{
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
  })
}

如果你不想让style-loader作为后备选项，你可以把它关掉，如果它没有被提取出来，它仍然会在包中，只是没有被注入到<style>标记中，但这可能对你没有帮助。