Angular Cli- 在 StyleURL 中添加一个位于 node_module 目录中的 css 文件

Posted 2023-02-22

【中文标题】Angular Cli- 在 StyleURL 中添加一个位于 node_module 目录中的 css 文件

【英文标题】：Angular Cli- In StyleURL add a css file located in the node_module directory

【发布时间】：2018-04-02 09:56:04

【问题描述】：

我正在使用Angular-Cli 运行我的前端应用程序。

我只想将 node_module 中的 css 文件添加到该特定组件。我不想将 CSS 文件添加到 Angular.cli.json "scripts": [] 数组中，

我有以下组件：

从“@angular/core”导入 Component, OnInit； @零件（ 选择器：'fbsign-component'， templateUrl: './fb.signin.component.html', styleUrls: ['./fb.signin.component.css', '../../node_modules/bootstrap-social/bootstrap-social.css'] ) 导出类 FbSigninComponent 构造函数（） ngOnInit(): 任何 点击（） window.location.href="http://localhost:1337/facebook"

我认为某些东西阻止了 styleURLs[] 访问位于 node_module 目录中的 CSS 文件。

如何解除屏蔽？

【参考方案1】：

试试这样：

下面的 home.component.ts 文件位于我项目中的位置

src => 应用程序 => 主页

这里是我的 home.component.ts

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

【参考方案2】：

您的目录结构是否正确？ 要访问当前文件夹之外的文件，请使用“../”

另一个原因可能是您试图访问子组件内的样式，而它们应该插入到使用选择器注入组件的父组件中，以获得正确的布局。

因此，请尝试将样式添加到您使用 'fbsign-component' 作为选择器的组件中。

【参考方案3】：

你可以动态加载它。

ngOnInit() 

    this.loadStyle('your path');
  

     loadStyle(src)
  
  let link = document.createElement('link');
  link.href = src;
  link.rel = 'stylesheet';
  link.type = 'text/css';
let head = document.getElementsByTagName('head')[0];
  let links = head.getElementsByTagName('link');
  let style = head.getElementsByTagName('style')[0];
  head.insertBefore(link, style);
  

【参考方案4】：

也许您需要使用 ViewEncapsulation.None 以使该组件可用于节点模块中的样式。尝试将其添加到您的组件装饰器中：

import  Component, OnInit, ViewEncapsulation  from '@angular/core';

@Component(  
    selector: 'fbsign-component',
    templateUrl: './fb.signin.component.html',
    styleUrls: [
        './fb.signin.component.css',
        '../../node_modules/bootstrap-social/bootstrap-social.css'
    ],
    encapsulation: ViewEncapsulation.None
)

export class FbSigninComponent

另一种选择是将这些外部样式添加到 angular.json 中： 架构师->构建->选项

"options": [
    ...
    "styles": [
        "./node_modules/bootstrap-social/bootstrap-social.css",
        "src/styles.scss"
    ]
]