Angular 2 的 webpack 中的 ExtractTextPlugin

Question

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

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

但后来我想获得一个包含应用程序中所有 scss 的单个 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 是一个空数组。我认为应该在这里做的是完全删除样式标签，因为 css 被用作外部分隔文件，对吧？有没有办法解决这个问题？

Answer 1

您可以使用css-loader，它通常用于CSS 的raw-loader。 fallback 是不提取 CSS 时使用的加载程序（如 extract options 中所述）。我想不出除了style-loader 之外的任何其他用途，它将CSS 插入<style> 标记中。您在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 作为后备选项，您可以将其关闭，如果未提取 CSS 仍将在包中，只是未注入 <style> 标记，但这可能不会帮不了你。