Css 未捕获错误：“样式”应为字符串数组

我尝试过针对此相同错误消息提出的解决方案，但没有成功。当我使用angular cli通过ng serve运行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

.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 { 

}

---

关于我做错了什么有什么建议吗？

我按照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"]
   })
}
...

及

---

这是我的网页设置，用于SCS和css文件。对于这个使用Angular Storybook的设置，所以这个网页包配置位于./Storybook中，我在app/styles中有一个全局样式表，它需要一些额外的处理，因为它在该目录中导入了其他使用相对路径的样式表。我在与此网页相同的目录中也有一个自定义样式表。/：

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"
}

---

您可以共享angular-cli.json文件吗？我已使用底部添加的.angular-cli.json中的代码更新了我的帖子显示您的组件，此错误很可能来自组件的样式属性您可能需要添加：样式：[require'yourStylefile.scss'.toString]我已添加应用程序根组件。我使用的其他组件都遵循相同的元数据结构。对scss文件使用raw+sass加载程序可以消除错误，但在我的例子中也没有正确加载css

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;
};

"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"
}