在Angular 4和Webpack 2中包含sass文件

我正在尝试使用Webpack2.2.1在Angular 4.3.5 web应用程序中使用scss文件和我的组件。顺便说一句，我现在不能使用angular cli

这是我的webpack.config文件部分，用于加载程序

        {
            test: /\.scss$/,
            loader: 'raw-loader!postcss-loader!sass-loader'
        },

        // all css required in src/app files will be merged in js files
        {
            test: /\.less$/,
            loader: 'raw-loader!postcss-loader!less-loader'
        }

正如您所看到的，我还有一个用于较少文件的加载程序，当一个组件使用较少文件时，它可以很好地工作

这是我的测试组件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test-component',
  templateUrl: './test-component.component.html',
  styleUrls: ['./test-component.component.scss'],
})
export class TestComponentComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

当我运行npm运行build时，我得到以下错误

Error: Expected 'styles' to be an array of strings.

我看了无数其他的帖子，到处搜索，但无论我如何更改加载程序、更新网页包或使用extracttextplugin，我都无法阻止这个错误的发生

---

非常感谢您的帮助。

这是我的配置加载程序：

const appRoot = path.resolve(__dirname, './app');

    loaders: [
        { exclude: [/node_modules/, /Scripts/], test: /\.js$/, loader: 'source-map-loader' },
        { exclude: [/node_modules/, /Scripts/], test: /\.ts$/, loader: 'tslint-loader' },
        { test: /\.ts$/, exclude: [/\.(e2e\-spec|e2e)\.ts$/], loaders: ['angular2-template-loader', 'awesome-typescript-loader?configFileName=./Client/tsconfig.json', 'angular2-router-loader'] },
        { include: appRoot, test: /\.css$/, loaders: ['raw-loader'] },
        //{ include: appRoot, test: /\.less$/, loaders: ['style-loader', 'less-loader'] },
        { include: appRoot, test: /\.scss$|\.sass$/, loaders: ['raw-loader', 'sass-loader'] },
        { exclude: appRoot, test: /\.css$/, loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css-loader'] }) },
        {
            test: /\.less$/, loader: ExtractTextPlugin.extract({
                fallbackLoader: 'style-loader',
                loader: ['css-loader', 'less-loader' ]
            })
        },
        { exclude: appRoot, test: /\.scss$|\.sass$/, loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css-loader', 'sass-loader'] }) },
        { test: /\.json$/, loader: 'json-loader' },
        { test: /\.(jpg|jpeg|png|gif|svg)$/, loader: 'url-loader', query: { limit: 25000 } },
        { test: /\.html$/, loader: 'html-loader' },
        { test: /\.(otf|woff|ttf)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader', query: { limit: 25000 } },
        { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader', query: { limit: 25000, mimetype: 'font/woff2' } },
        { test: /\.eot$/, loader: 'file-loader' }
    ]

但更好的方法是使用Angular cli，只修改一个参数：

 "styleExt": "scss"

---

尝试类似于加载程序数组{test://\.styl$/，加载程序：['raw-loader'，stylus-loader']}，{test://\.less$/，加载程序：['raw-loader'，less-loader']}，{test://\.scss$\.sass$\，加载程序：['raw-loader'，sass-loader']}包括样式{test test test://\.styl styll$/，加载程序：['raw-loader'，stylus-loader']