未捕获的错误：预期的“样式”是字符串数组

Question

我已尝试针对此相同错误消息提出的解决方案，但没有成功。当我通过 ng serve 使用 angular cli 运行我的 angular 项目时，该项目运行良好，没有错误。但是，当我使用 webpack 编译它时，我收到了（完整的）错误消息：

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：

// 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-root / 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

我按照 Shobhit 的建议解决了我的问题，将以下内容添加到 webpack.config.json：

...
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")
...

Answer 2

这是我的 webpack 设置，适用于 scss 和 css 文件。对于这个设置（使用 Angular Storybook，所以这个 webpack 配置位于./storybook），我在 app/styles 中有一个全局样式表，需要一些额外的按摩，因为它在该目录中导入了使用相对路径的其他样式表。我在这个 webpack (./) 的同一目录中也有一个自定义样式表：

webpack.config.js

const path = require('path');
const autoprefixer = require('autoprefixer');
const postCSSCustomProperties = require('postcss-custom-properties');

const postcssPlugins = () => [
    require('postcss-flexbugs-fixes'),
    autoprefixer({ flexbox: 'no-2009' }),
    postCSSCustomProperties({ warnings: true })
];
module.exports = (baseConfig, env, config) => {
  baseConfig.module.rules = [
    ...baseConfig.module.rules.filter(r => !r.test.toString().includes(".s(c|a)ss")), // base rules supplied by Angular Storybook
    ...
    {
      test: /\.css$/,
      use: [
        'raw-loader',
        {
            loader: 'postcss-loader',
            options: {
                plugins: postcssPlugins
            }
        }
      ]
    },
    { // component scss loader
      test: /\.scss$/,
      include: [path.resolve(__dirname, '../')],
      exclude: [path.resolve(__dirname, '../app/styles'), path.resolve(__dirname, './')],
      use: [
        'raw-loader',
        {
            loader: 'postcss-loader',
            options: {
                plugins: postcssPlugins
            }
        },
        'sass-loader'
      ]
    },
    { // global and storybook scss loader
      test: /\.scss$/,
      include: [path.resolve(__dirname, '../app/styles'), path.resolve(__dirname, './')],
      loaders: [
        'style-loader',
        'css-loader',
        'resolve-url-loader', // resolves relative imports
        'sass-loader?sourceMap' // sourcemap = true to assist resolve-url-loader
      ]
    },
    ...
  ];

  baseConfig.resolve.extensions.push(".css", ".scss");
  baseConfig.resolve.alias = {
    ...baseConfig.resolve.alias,
    "assets": path.resolve(__dirname, "../app/assets") // needed to resolve relative paths in imported scss using an alias, where the imported files referred to sheets like "url(~assets/path/to/pic.jpg)"
  }

  return baseConfig;
};

package.json

"dependencies": {
   "@angular/core": "^6.1.3",
   "resolve-url-loader": "^3.0.0",
},
"devDependencies": {
   "@ngtools/webpack": "6.0.8",
   "@storybook/angular": "^4.1.4",
   "css-loader": "^0.28.11",
   "postcss-custom-properties": "^7.0.0",
   "postcss-flexbugs-fixes": "^3.3.1",
   "postcss-loader": "^2.1.5",
   "raw-loader": "^0.5.1",
   "sass-loader": "^7.0.3",
   "style-loader": "^0.23.1",
   "webpack": "4.15.0"
}