未知のエラー：文字列の配列であると予想される 'スタイル'

Question

私はこの同一のエラーメッセージのために提案された解決策を成功させずに試みました。私がサーブして角型プロジェクトを実行すると、プロジェクトはエラーなく正常に実行されます。

Uncaught Error: Expected 'styles' to be an array of strings. 
    at z (vendor.js:1) 
    at t.getNonNormalizedDirectiveMetadata (vendor.js:1) 
    at t.loadDirectiveMetadata (vendor.js:1) 
    at vendor.js:1 
    at Array.forEach (<anonymous>) 
    at vendor.js:1 
    at Array.forEach (<anonymous>) 
    at t._loadModules (vendor.js:1) 
    at t._compileModuleAndComponents (vendor.js:1) 
    at t.compileModuleAsync (vendor.js:1) 
    at e._bootstrapModuleWithZone (vendor.js:1) 
    at e.bootstrapModule (vendor.js:1) 
    at Object.<anonymous> (app.js:1) 
    at Object.199 (app.js:1) 
    at e (vendor.js:1) 
    at window.webpackJsonp (vendor.js:1) 
    at app.js:1 

マイwebpack.config.js：：私はWebPACKのとそれをコンパイルするときしかし、私は（フル）エラーメッセージが表示されます

// Plugins 

const webpack = require("webpack"); 
const HtmlWebpackPlugin = require("html-webpack-plugin"); 

// Config 

module.exports = { 

    entry: { 
     app: "./src/main.ts", 
     vendor: ["./src/vendor.ts", "./src/polyfills.ts"] 
    }, 

    output: { 
     publicPath: "", 
     path: __dirname + "/dist/", 
     filename: "[name].js" 
    }, 

    resolve: { 
     extensions: ['.ts', '.js'] 
     }, 

    module: { 
     rules: [ 
      { 
       test: /\.ts$/, 
       loaders: [ 
        { 
        loader: "awesome-typescript-loader", 
        options: { tsconfig: "tsconfig.json" } 
        }, "angular2-template-loader" 
       ] 
      }, 
      { 
       test: /\.(html)$/, 
       loaders: [ 
        { 
         loader: "html-loader" 
        } 
       ] 
      }, 
      { 
       test: /\.(css|scss)$/, 
       loaders: ['to-string-loader', 'css-loader', 'sass-loader'] 
      } 
     ] 
    }, 

    plugins: [ 
     new webpack.optimize.UglifyJsPlugin({ 
      comments: false 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
       names: ["app", "vendor"] 
     }), 
     new HtmlWebpackPlugin({ 
      template: "src/index.tpl.html", 
      inject: "body", 
      filename: "index.html" 
     }) 
    ] 

} 

.angular-cli.json

{ 
    "apps": [ 
    { 
     "root": "src", 
     "outDir": "dist", 
     "index": "index.tpl.html", 
     "main": "main.ts", 
     "polyfills": "polyfills.ts" 
    } 
    ], 
    "defaults": { 
    "styleExt": "css" 
    } 
} 

アプリルート/ app.component.ts

import { Component } from "@angular/core"; 
import { Observable } from "rxjs/Rx"; 
import { NgFor } from "@angular/common"; 

@Component ({ 
    selector: "app-root", 
    templateUrl: "./app.component.html", 
    styleUrls: ["./app.component.css"] 
}) 

export class AppComponent { 

} 

私が間違ってやっていることに関する提案はありますか？

Answer 1

私はwebpack.config.jsonに以下を追加し、Shobhitの提案に従うことによって、私の問題を解決：

... 
rules: [ 
{ 
    test: /\.(scss|css)$/, 
    use: ["raw-loader", "sass-loader"] 
}, 
{ 
    test: /\.scss$/, 
    exclude: [/node_modules/, /src\/app/], 
    use: ExtractTextPlugin.extract({ 
    fallback: "style-loader", 
    use: ["css-loader", "sass-loader"] 
    }) 
} 
... 

そして

plugins: [ 
    new ExtractTextPlugin("styles.css") 
...