将css导入scss文件后css不起作用 - 角度4答案

【问题标题】：css doesn't work after importing it to scss file - angular 4将css导入scss文件后css不起作用 - 角度4
【发布时间】：2018-02-12 07:00:13
【问题描述】：

我有一个 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";

但问题是，在触发“ng serve”后，“abc.css”的样式不会反映在该组件上。

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

【问题讨论】：

在.angular-cli.json 文件中的styles 条目下添加abc.css，其中还添加了styles.scss。这应该可以解决这个问题。
@Faisal，我不希望这个 css 在全球范围内使用，我希望它只在 10 个组件中的 2 个组件中使用。
我在 Angular 11 上试过这个，但仍然无法正常工作。另一种方法是配置惰性文件并自行加载，参考：How to lazy load global style?

标签： css angular sass

【解决方案1】：

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

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

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

【讨论】：

我试过这个，但它对我没有帮助。还是谢谢