我们如何在角项目中使用外部样式表？

Question

如何在角度项目中包含外部样式表并在不同的组件中使用它们。任何人都可以告诉我包括样式表的整个过程。

我想在我的角度项目中使用自定义构建的模板。我有所有的代码（HTML，CSS）但我无法添加或导入我的角度项目中的所有代码特别是CSS。

Answer 1

您可以在projectname / src /目录中重写styles.css文件。

或者，您可以将问题中的样式文件（somename.css）添加到styles数组中的angular.json文件中

"version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "somthing": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }

Answer 2

在assets文件夹中添加一个名为css的文件夹，并将所有css文件放入其中。 之后在styles.css文件中（该文件存在于src文件夹中）将导入添加到您的css文件中：

/* You can add global styles to this file, and also import other style files */

@import "assets/css/name_of_file.css";