如何在 Angular 中 @import CSS 文件？

Question

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

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

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

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

@import "theme.scss";

Angular找不到此路径。

Answer 1

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

        "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"],

如何在 Angular 中 @import CSS 文件？

How to @import CSS file in Angular?

angular

angular6

angular8