Question

这是我得到的错误：

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

即使我已经在字符串数组中指定了样式：

styleUrls: ['./app.component.css']

这是相关的代码，任何想法我做错了什么？

app.component.ts

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

@Component({
  selector: 'my-app',
  template: `<h2 class="float-left">Hey</h2>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent { }

app.component.css

.float-left {
  float: left;
}

来自webpack.common.js的片段

module: {
  rules: [{
    test: /\.ts$/,
    loaders: ['awesome-typescript-loader', 'angular2-template-loader']
  },
  {
    test: /\.html$/,
    loader: 'html-loader'
  },
  {
    test: /\.css$/,
    loader: 'css-loader'
  }]
},

Answer 1

由于我没有亲身经历过这一点 - 我确实找到了一个封闭的主题（但最近添加了一些内容） - 这可能会帮助您解决问题。

https://github.com/webpack-contrib/style-loader/issues/123

第一个建议，并且显然在当时工作，解决方案对我来说就是这个：

{ test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] }

还有其他建议和解决方案进一步列出;希望其中一个可以帮助您解决问题。

有一点需要注意 - 如果你使用的是angular-cli，它似乎可能会有所不同。如果您，那么请确保您使用webpack遵循他们的指导原则，因为它们有一些小的差异，而不是使用非angular-cli构建。

Answer 2

你需要在css-loader之后使用style-loader。

test: /\.css$/,
use: [{loader: 'style-loader'},{loader: 'css-loader'}]

＆＃34>中的装载机使用＆＃34;数组按从数组中的最后一个到数组中的第一个顺序运行。首先运行css-loader来准备CSS，然后将结果传递给style-loader以在页面中嵌入样式。

使用webpack

2 个答案: