在将CSS导入到SCSS文件后，CSS无法工作 - Angular 4

Question

在将CSS导入到SCSS文件后，CSS无法工作 - Angular 4

3

我有一个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" 文件的样式不会反映在该组件中。

我很困惑，当我将这个 css 文件导入全局的 "styles.scss" 中时它能正常工作，但是在组件内却不能。有人可以帮助我解决这个问题吗？谢谢。

- sajalsuraj

在.angular-cli.json文件的styles条目下添加abc.css，其中还要添加styles.scss。这应该会解决这个问题。 - FAISAL

1

@Faisal，我不希望这个CSS在全局范围内使用，我只想在10个组件中的2个特定组件中使用它。 - sajalsuraj

1

我已尝试在Angular 11上，但仍未成功。另一种方法是配置懒加载文件并自行加载，参考：如何懒加载全局样式？ - Phi Nguyễn

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pterrat · Answer 1

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

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

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