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

Question

I'm using Angular2 Universal starter to setup my project. I'm trying to setup the scss files but I am running into an issue when using Extract Text Plugin:

package.json

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

Webpack setup:

....
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
  })
 ]....

When I build the project, I get this error:

TypeError: cssText.replace is not a function

In my App Componet, I load the scss files using "angular2-template-loader":

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

In my dist folder, the main.scss is compiled to 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 ...

If anyone can point me in the right direction, that would be greatly appreciated. Thank you.

************ UPDATE *********************

I found out that

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

doesn't return a String as expected using Extract Text Plugin. I then cast the require output to a string:

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

which works as expected but when I inspect the Header, I'm seeing:

<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

{ test: /.scss$/i, use: ['to-string-loader', ...extractCSS.extract({ loader: ['css-loader', 'sass-loader'] })] }

This will extract all css from components to a external css files. This will break angular view encaptulation as angular can't modify css. I'm still trying to figure it out how to make it work with encaptulation. I'm not sure at witch stage angular changes the css to add attributes.

Also instead of : styles: [require('../assets/styles/main.scss')], you can say: styleUrls: ['../assets/styles/main.scss']