Question

我有一个CSS文件，我们称之为“ abc.css ”。它位于代码库的“ / src ”文件夹中，并带有“ styles.scss ”。当我在“ styles.scss ”中导入此CSS文件时，它完美无缺。

@import "abc.css"

我创建了一些名为“ xyz ”的组件。它还有一个名为“ xyz.component.scss ”的scss文件。现在我想在“ xyz.component.scss ”中导入“ abc.css ”。所以我做了

@import "../../abc.css";

但问题是，在“ ng serve ”之后，“abc.css”的样式没有反映在该组件上。

我很困惑，当我在全局“styles.scss”中导入它时，这个css文件是如何工作的，但是在组件内部没有工作。有人可以帮我解决这个问题吗？感谢。

Answer 1

您可以在组件声明中导入两个样式文件（或更多）：

@Component({
  selector: 'my-component',
  template: `

  `,
  styleUrls: ['./xyz.component.scss','../../abc.css']
})
export class MyComponent{
/* . . . */
}

将CSS导入scss文件后，css不起作用 - angular 4

1 个答案: