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

Question

我有一个 CSS 文件，我们称它为“abc.css”。它与“styles.scss”位于代码库的“/src”文件夹中。当我在“styles.scss”中导入此 CSS 文件时，它运行良好。

@import "abc.css"

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

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

但问题在于，这里的“abc.css”样式在触发“ng serve”后并未反射(reflect)在该组件上。

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

Answer 1

您可以在组件声明中导入两个样式文件(或更多):

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

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