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，build就可以了，但是在加载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

/***/ }),

所以我猜这是棱角分明的抱怨，样式是一个空数组。这里应该做什么我认为完全删除样式标记，因为css用作外部分隔文件，对吧？有没有办法解决这个问题？

Answer 1

您可以使用css-loader，raw-loader通常用于fallback。而style-loader是在不提取CSS时使用的加载器（如extract options中所述）。我想不出除<style>之外的任何其他用途，它会将CSS插入use标记中。您在raw-loader中指定的加载器仍然在此之前应用，因此使用.scss实际上不会产生任何影响。

您已将{ test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'resolve-url-loader', 'sass-loader?sourceMap'] }) }规则更改为此常用规则（类似于Extracting Sass中的示例）：

style-loader

如果您不希望将<style>作为后备，则可以将其关闭，如果未提取CSS，则CSS仍将在捆绑中，而不是注入job('example') { steps { copyArtifacts('upstream') { includePatterns('*.xml', '*.properties') excludePatterns('test.xml', 'test.properties') targetDirectory('files') flatten() optional() buildSelector { latestSuccessful(true) } } } }标记，但这可能对你没有帮助。

在webpack中为Angular 2提取ExtxtTextPlugin

1 个答案: