如何在 Angular js 中包含我的组件的 .css 文件

Posted 2023-03-06

【中文标题】如何在 Angular js 中包含我的组件的 .css 文件

【英文标题】：How to include .css file of my component in angular js

【发布时间】：2021-10-31 15:02:10

【问题描述】：

我以这种方式包含了我的组件的 .css 文件 `

angular.
  module('home').
  component('home', 
    templateUrl: 'home/home.template.html',
    styleUrls: 'home/home.component.css'
    
    
  );

` 但似乎样式表没有得到应用。 包含样式表的正确方法是什么？ This is the folder structure.

【问题讨论】：

只是想知道为什么你用 javascript 而不是 typescript 编写 angular 2。此外，您粘贴代码的方式使其看起来像 angular.js，而不是 angular 2+ 指南

我有一个项目要在 Angular 1.x 中构建，其中包括 .js 文件。

【参考方案1】：

I faced the same problem and then I found the answer. just add this line inside the component declaration :

encapsulation: ViewEncapsulation.None

for example, 

@Component(
  templateUrl: './usertradedata.component.html',
  animations: [appModuleAnimation()],
  styleUrls:['./usertradedata.component.css'],
  encapsulation: ViewEncapsulation.None
)

【参考方案2】：

styleUrls 接受一个数组

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

【讨论】：

我试过了，但没有任何作用。 Css 没有被应用。

【参考方案3】：

你必须像这样在 url 上加上方括号：styleUrls: ['home/home.component.css']

angular.
  module('home').
  component('home', 
    templateUrl: 'home/home.template.html',
    styleUrls: ['home/home.component.css']
    
    
  );