Question

根据Angular Component Styles下的文档，我试图导入在node_modules下找到的样式表;即：

test.component.css：

@import '~@angular/material/core/theming/all-theme.css';

由此定义组件：

@Component({
    moduleId: module.id,
    selector: 'app-test',
    templateUrl: 'test.component.html',
    styleUrls: ['test.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class TestComponent {
}

不幸的是，当浏览页面时，无法找到~@angular/material/core/theming/all-theme.css。

此项目是使用Angular-Cli设置的。

我想我可以复制样式，并以这种方式引用它们，但我宁愿将库依赖项分开。

Answer 1

如果要包含节点模块文件夹中的任何样式表..只需将其添加到.angular-cli.json

 "styles": [
    "../node_modules/bootstrap/scss/bootstrap.scss"
]

此外，您不需要添加encapsulation:ViewEncapsulation.None，直到您使用某个第三方插件动态创建html或添加一些随机css。

你总是可以使用.angular-cli.json

中包含的全局css

Answer 2

问题在于文件扩展名。您使用的扩展程序css不支持从其他位置导入文件，您可以更好地将扩展名更改为scss。在此，您可以从node_modules导入文件。

Angular 2 Component Styles无法解析来自node_modules的css导入

2 个答案: