使用 webpack 将 css 移动到 Angular 4 组件中的外部文件答案

【问题标题】：Move css to an external file in an angular 4 component using webpack使用 webpack 将 css 移动到 Angular 4 组件中的外部文件
【发布时间】：2017-11-12 10:43:09
【问题描述】：

这是我得到的错误：

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'
  }]
},

【问题讨论】：

标签： css angular webpack

【解决方案1】：

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

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

第一个建议并且当时显然有效的解决方案是这个：

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

下面列出了其他建议和解决方案；希望其中之一能帮助您解决问题。

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

【讨论】：

【解决方案2】：

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

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

“use”数组中的加载器按从数组最后一个到数组第一个的顺序运行。首先运行 css-loader 来准备 CSS，然后将结果传递给 style-loader 以将样式嵌入到页面中。

【讨论】：