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

【问题标题】：Angular2 / Webpack 2 / Sass setup : TypeError: cssText.replace is not a functionAngular2 / Webpack 2 / Sass 设置：TypeError：cssText.replace 不是函数
【发布时间】：2017-02-14 01:59:36
【问题描述】：

我正在使用 Angular2 Universal starter 来设置我的项目。我正在尝试设置 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???

【问题讨论】：

标签： javascript angular sass universal

【解决方案1】：

{ 测试：/.scss$/i，使用：['to-string-loader', ...extractCSS.extract({ 加载器：['css-loader', 'sass-loader'] })] }

这会将组件中的所有 css 提取到外部 css 文件中。这将破坏角度视图封装，因为角度无法修改 css。我仍在试图弄清楚如何使它与封装一起工作。我不确定在女巫阶段 angular 会更改 css 以添加属性。

也代替：样式：[需要（'../assets/styles/main.scss'）]，你可以说： styleUrls: ['../assets/styles/main.scss']

【讨论】：