Angular2 / Webpack 2 / Sass设置：TypeError：cssText.replace不是函数

Question

我正在使用Angular2 Universal入门版设置我的项目。 我正在尝试设置scss文件，但是在使用“提取文本插件”时遇到问题：

的package.json

"webpack": "2.2.1",
"extract-text-webpack-plugin": "^2.0.0-rc.2"

Webpack设置：

....
module: {
rules: [
  // TypeScript
  { test: /\.ts$/,   use: ['awesome-typescript-loader', 'angular2-template-loader'] },
  { test: /\.html$/, use: 'raw-loader' },
  { test: /\.css$/, use: 'raw-loader' },
  { test: /\.scss$/, use: ExtractTextPlugin.extract({fallbackLoader: "style-loader", loader:'raw-loader!sass-loader'})},
  { test: /\.(woff2?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, use: "file?name=fonts/[name].[ext]"},
  { test: /\.json$/, use: 'json-loader' }
],
 },

plugins: [
  //Use commonPlugins.
  new ExtractTextPlugin({
    filename: '[name].css',
    allChunks: true,
    disable: false
  })
 ]....

构建项目时，出现以下错误：

TypeError: cssText.replace is not a function

在我的App Componet中，我使用“ angular2-template-loader”加载scss文件：

...
@Component({
    changeDetection: ChangeDetectionStrategy.Default,
    encapsulation: ViewEncapsulation.Emulated,
    selector: 'app',
    styles: [require('../assets/styles/main.scss')],

在我的dist文件夹中，main.scss编译为main.css：

/**
 * SCSS entry point
 * IMPORTANT: Do not add any styles here instead import your scss files
 */
/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT     (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0; }

article,
aside ...

如果有人能指出正确的方向，那将不胜感激。 谢谢。

************更新*********************

我发现

 require('../assets/styles/main.scss')

使用提取文本插件未按预期返回字符串。 然后，我将require输出转换为字符串：

require('../assets/styles/main.scss').toString()

可以正常工作，但是当我检查标题时，我看到：

<link rel="stylesheet" href="/main.css"> ---> My generate scss file
<style>[object Object]</style>   ---> seems like this is coming from the app component styles property???

Answer 1

{测试：/.scss$/i，使用：['to-string-loader'，... extractCSS.extract（{loader：['css-loader'，'sass-loader']}）]}

这会将所有CSS从组件提取到外部CSS文件。 这将破坏角度视图的封装，因为角度无法修改CSS。 我仍在尝试弄清楚如何使其与封装结合使用。 我不确定在女巫阶段角度会更改CSS来添加属性。

也可以代替：：styles：[require（'../ assets / styles / main.scss']]，说：styleUrls：['../assets/styles/main.scss']