Angular 组件不采用字符串数组作为样式

Posted 2023-03-13

【中文标题】Angular 组件不采用字符串数组作为样式

【英文标题】：Angular component doesn't take array of strings for styles

【发布时间】：2018-06-26 11:08:24

【问题描述】：

Angular 5/cli。当我有一个样式 url ( styleUrls:['./home.component.css'] ) 时，一切都很好，但是当我向数组添加一个通用样式表时 ('../../styles.css')我收到一个错误：

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

@Component(
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['../../styles.css', './home.component.css']
)

我很确定它是一个字符串数组。这里有什么问题？

更新： 添加到 angular-cli.json 的样式将生成一个合并的样式表文件。 不需要在组件 styleUrls 中包含常用 css。

...
"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "./styles.css"
],
...

【问题讨论】：

从 home.component.css 中删除 ./

这不会解决任何问题...

可以分享一下webpack文件吗？

../../style.css 真的存在吗？

@rrd 文件存在。用解决方案编辑问题。但是，如果我只是从组件中引用公共 css，我希望它能够工作。

【参考方案1】：

尝试在组件 css 文件中使用 @import 来添加样式。例如，考虑下一个结构：

src
|-app
   |-new_component
      |-new_component.component.ts
      |-new_component.component.html
      |-new_component.component.css
   | \\ etc.
|-style.css
| \\ etc.

在“new_component.component.css”中你可以使用：

@import '../../styles.css';