angular - 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 , 通常用于 raw-loader对于 CSS。和 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，CSS 仍将位于 bundle 中，只是不会注入(inject)到 <style> 中。标记，但这可能对您没有帮助。