外部 CSS 文件无法与我的 Angular 项目集成

Question

   strong text    {
      "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
      "version": 1,
      "newProjectRoot": "projects",
      "projects": {
        "first": {
          "root": "",
          "sourceRoot": "src",
          "projectType": "application",
          "prefix": "app",
          "schematics": {},
          "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "options": {
                "outputPath": "dist/first",
                "index": "src/index.html",
                "main": "src/main.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "src/tsconfig.app.json",
                "assets": [
                  "src/favicon.ico",
                  "src/assets"
                ],
                "styles": [
                  "node_modules/bulma/css/bulma.css",
                  "src/styles.css"
                ],
                "scripts": [],
                "es5BrowserSupport": true
              },
              "configurations": {
                "production": {
                  "fileReplacements": [
                    {
                      "replace": "src/environments/environment.ts",
                      "with": "src/environments/environment.prod.ts"
                    }
                  ],
                  "optimization": true,
                  "outputHashing": "all",
                  "sourceMap": false,
                  "extractCss": true,
                  "namedChunks": false,
                  "aot": true,
                  "extractLicenses": true,
                  "vendorChunk": false,
                  "buildOptimizer": true,
                  "budgets": [
                    {
                      "type": "initial",
                      "maximumWarning": "2mb",
                      "maximumError": "5mb"
                    }
                  ]
                }
              }
            },
            "serve": {
              "builder": "@angular-devkit/build-angular:dev-server",
              "options": {
                "browserTarget": "first:build"
              },
              "configurations": {
                "production": {
                  "browserTarget": "first:build:production"
                }
              }
            },
            "extract-i18n": {
              "builder": "@angular-devkit/build-angular:extract-i18n",
              "options": {
                "browserTarget": "first:build"
              }
            },
            "test": {
              "builder": "@angular-devkit/build-angular:karma",
              "options": {
                "main": "src/test.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "src/tsconfig.spec.json",
                "karmaConfig": "src/karma.conf.js",
                "styles": [
                  "src/styles.css"
                ],
                "scripts": [],
                "assets": [
                  "src/favicon.ico",
                  "src/assets"
                ]
              }
            },
            "lint": {
              "builder": "@angular-devkit/build-angular:tslint",
              "options": {
                "tsConfig": [
                  "src/tsconfig.app.json",
                  "src/tsconfig.spec.json"
                ],
                "exclude": [
                  "**/node_modules/**"
                ]
              }
            }
          }
        },
        "first-e2e": {
          "root": "e2e/",
          "projectType": "application",
          "prefix": "",
          "architect": {
            "e2e": {
              "builder": "@angular-devkit/build-angular:protractor",
              "options": {
                "protractorConfig": "e2e/protractor.conf.js",
                "devServerTarget": "first:serve"
              },
              "configurations": {
                "production": {
                  "devServerTarget": "first:serve:production"
                }
              }
            },
            "lint": {
              "builder": "@angular-devkit/build-angular:tslint",
              "options": {
                "tsConfig": "e2e/tsconfig.e2e.json",
                "exclude": [
                  "**/node_modules/**"
                ]
              }
            }
          }
        }
      },
      "defaultProject": "first"
    }

我开始使用 Angular，当我开始一个新项目时，我在外部 CSS 文件集成时遇到了问题。目前我在外部使用 Bulma CSS。根据文档，我按照这些步骤操作，但无法获得所需的输出。在第一步中，我使用 "npm install Bulma" 在我的项目中安装外部 CSS。接下来，我从 node_modules 复制了 Bulma CSS 的路径，并以 angular.json 的样式给出了路径我尝试了其他外部 CSS 文件，但出现了同样的问题。

Answer 1

在引用前添加./。像这样

./node_modules/bulma/css/bulma.css

Answer 2

也许尝试在 Styles.css 中导入 bulma.css。像这样

@import '~bulma/css/bulma.css';

Answer 3

Bulma 的路径看起来不错，我没有发现这段代码有任何问题。您重新启动 ng serve 了吗？ angular.json 文件未被监视且未持续构建。

外部 CSS 文件无法与我的 Angular 项目集成

External CSS file cannot integrate with my Angular Project

css

bulma

angular