3

我有一个使用 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 被用作外部分隔文件，对吧？有没有办法来解决这个问题？

4

1 回答 1

0

您可以使用css-loader，它通常用于raw-loaderCSS。并且fallback是在不提取 CSS 时使用的加载器（如提取选项中所述）。除了 ，我想不出任何其他用途style-loader，它将 CSS 插入<style>标签中。您在其中指定的加载use器仍然在此之前应用，因此 usingraw-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 仍将位于捆绑包中，只是未注入<style>标签，但这可能对您没有帮助。

于 2017-03-03T23:24:29.790 回答