从NPM包中的SCSS文件导入的样式未应用于我的角度组件

时间:2019-01-18 17:00:32

标签: angular sass encapsulation

我是Angular的新手。

我们公司拥有一个包含多个项目共享的SCSS的程序包。每个组件都有其自己的SCSS文件集(与bootstrap-SASS几乎相同)。 我的angular项目使用了通过npm安装的软件包。

如果导入组件的SCSS,则需要在我的角度项目的styles.scss中正确应用CSS。这不是我想要的。 我希望从需要它的角度组件中仅加载我需要的SCSS。

> front / src / styles.scss

    @import "~@company/style/scss/numerictextbox";

如果在我的角度组件的SCSS文件中进行相同的导入,则不会应用CSS。

> front / src / app / item / item.component.scss

    @import "~@company/style/scss/numerictextbox";

我可以在<style>中添加的<header>中看到我的CSS,但是由于某些原因它没有被应用。

我仍在尝试学习Angular的技巧。我想念一件大事吗?

这是我的组成部分:

> front / src / app / item / item.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
  styleUrls: ['./item.component.scss'],
})
export class ItemComponent implements OnInit {

  @Input() group: FormGroup;

  constructor() { }

}

0 个答案:

没有答案