如何在角度中@import CSS文件?

Question

我有一个文件需要在另一个css文件中使用。

为此，我已将其添加到angular.json文件中：

"styles": ["src/assets/css/theme.scss"],

然后我尝试在 css 文件中使用它：

@import "theme.scss";

Angular找不到这条路径。

Answer 1

如果你想指向组件中的css/scss文件，你可以在options节点的angular.json中添加一个快捷方式到你的styles文件夹，如下所示：

"my-app": {
"root": "...",
"sourceRoot": "...src",
"projectType": "application",
"architect": {
"build": {
[...]
"options": {
[...]
"stylePreprocessorOptions": {
"includePaths": [
"projects/my-app/src/styles" // path to your styles folder
]
}
}

},
}
},

然后，每当您使用@import "...";，它将从css文件夹开始，因此您可以使用@import "theme.scss";

Answer 2

转到angular.json并包含"styles": ["../assets/css/theme.scss","styles.css"],