AngularJS中如何正确引入组件对应的.css样式文件

错误原因 #

你当前的配置里styleUrls传参类型错误，AngularJS组件的styleUrls配置项要求接收样式路径组成的数组，不能直接传单个字符串，这是样式不生效的核心原因。

正确写法 #

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

异常排查 #

如果修改后样式仍未生效，可以按以下步骤检查：

• 核对home/home.component.css路径与实际项目中的文件存放位置完全一致
• 若项目构建工具不支持组件样式自动加载，可直接在入口HTML文件中通过<link rel="stylesheet" href="home/home.component.css">手动引入样式

内容的提问来源于stack exchange，提问作者Madhur Rai