Angular8 组件样式不生效引发的思考

背景

从angularjs升级到angular8, 对应ui-grid不支持。
寻找替代方案，入门可以参考。

小插曲

基于组件思想，尝试把组件样式，放到组件同级目录
将ag-grid css样式引入到app.component.scss中，非styles.css中

        @import "~ag-grid-community/dist/styles/ag-grid.css";
        @import "~ag-grid-community/dist/styles/ag-theme-balham.css" ;

界面样式，心里立刻万马奔腾~
基于之前的ngular组件样式封装，立刻想到可能是组件样式封装问题。
app.component.ts中修改如下，效果立刻恢复~

  @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss'],
     encapsulation:ViewEncapsulation.None  //样式不进行封装
  })

** 真的是样式封装的问题吗？ **

package.json 存在如下配置

"scripts": {
   "ng": "ng",
   "start": "ng serve",
   "build": "ng build",
   "test": "ng test",
   "lint": "ng lint",
   "e2e": "ng e2e"
 },

angular.json存在如下配置

 "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ag-grid-demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "ag-grid-demo:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "ag-grid-demo:build:production"
            }
          }
        },
        "extract-i18n": {
          ...
        },
        "test": {
          ....
        },
        "lint": {
          ...
        },
        "e2e": {
          ...
        }
      }

*** 这两者是如此的相似？*** ，上述原因会不会因为打包，没有把组件样式打包呢？仅仅打包全局样式？

angular.json schema如何查找

* angular.json有段如下配置

````
 "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
````

angular.json schema 查看

angular.json整体结构

"$schema": {
   "type": "string"
 },
 "version": {
   "$ref": "#/definitions/fileVersion"
 },
 "cli": {
   "$ref": "#/definitions/cliOptions"
 },
 "schematics": {
   "$ref": "#/definitions/schematicOptions"
 },
 "newProjectRoot": {
   "type": "string",
   "description": "Path where new projects will be created."
 },
 "defaultProject": {
   "type": "string",
   "description": "Default project name used in commands."
 },
 "projects": {
   "type": "object",
   "patternProperties": {
     "^[a-zA-Z][.0-9a-zA-Z]*(-[.0-9a-zA-Z]*)*$": {
       "$ref": "#/definitions/project"
     }
   },
   "additionalProperties": false
 }

"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
 ....
},
"defaultProject": "ag-grid-demo"

基于此时，小伙伴你发现了什么吗？

查看其中关键的 projects

"projects": {
   "type": "object",
   "patternProperties": {
     "^[a-zA-Z][.0-9a-zA-Z]*(-[.0-9a-zA-Z]*)*$": {
       "$ref": "#/definitions/project"
     }
   },
   "additionalProperties": false
 }

patternProperties 让我们去找 #/definitions/project ，这是什么？ html里面的锚点，我们试着在同文档中查找

看definitions/project

"definitions":{
    "project":{
        ...
        "architect": {
        "type": "object",
        "additionalProperties": {
          "$ref": "#/definitions/project/definitions/target"
        }
      },
    }
    ...
}

再看architect → definitions/project/definitions/target

  "target": {
          "oneOf": [
            {
              "$comment": "Extendable target with custom builder",
              "type": "object",
              "properties": {
                "builder": {
                  "type": "string",
                  "description": "The builder used for this package.",
                  "not": {
                    "enum": [
                      "@angular-devkit/build-angular:app-shell",
                      "@angular-devkit/build-angular:browser",
                      "@angular-devkit/build-angular:dev-server",
                      "@angular-devkit/build-angular:extract-i18n",
                      "@angular-devkit/build-angular:karma",
                      "@angular-devkit/build-angular:protractor",
                      "@angular-devkit/build-angular:server",
                      "@angular-devkit/build-angular:tslint"
                    ]
                  }
                },
                "options": {
                  "type": "object"
                },
                "configurations": {
                  "type": "object",
                  "description": "A map of alternative target options.",
                  "additionalProperties": {
                    "type": "object"
                  }
                }
              },
              "required": [
                "builder"
              ]
            },
            {
              "type": "object",
              "properties": {
                "builder": { "const": "@angular-devkit/build-angular:app-shell" },
                "options": { "$ref": "#/definitions/targetOptions/definitions/appShell" },
                "configurations": {
                  "type": "object",
                  "additionalProperties": { "$ref": "#/definitions/targetOptions/definitions/appShell" }
                }
              }
            },
            {
              "type": "object",
              "properties": {
                "builder": { "const": "@angular-devkit/build-angular:browser" },
                "options": { "$ref": "#/definitions/targetOptions/definitions/browser" },
                "configurations": {
                  "type": "object",
                  "additionalProperties": { "$ref": "#/definitions/targetOptions/definitions/browser" }
                }
              }
            },
            {
              "type": "object",
              "properties": {
                "builder": { "const": "@angular-devkit/build-angular:dev-server" },
                "options": { "$ref": "#/definitions/targetOptions/definitions/devServer" },
                "configurations": {
                  "type": "object",
                  "additionalProperties": { "$ref": "#/definitions/targetOptions/definitions/devServer" }
                }
              }
            },
            {
              "type": "object",
              "properties": {
                "builder": { "const": "@angular-devkit/build-angular:extract-i18n" },
                "options": { "$ref": "#/definitions/targetOptions/definitions/extracti18n" },
                "configurations": {
                  "type": "object",
                  "additionalProperties": { "$ref": "#/definitions/targetOptions/definitions/extracti18n" }
                }
              }
            },
            {
              "type": "object",
              "properties": {
                "builder": { "const": "@angular-devkit/build-angular:karma" },
                "options": { "$ref": "#/definitions/targetOptions/definitions/karma" },
                "configurations": {
                  "type": "object",
                  "additionalProperties": { "$ref": "#/definitions/targetOptions/definitions/karma" }
                }
              }
            },
            {
              "type": "object",
              "properties": {
                "builder": { "const": "@angular-devkit/build-angular:protractor" },
                "options": { "$ref": "#/definitions/targetOptions/definitions/protractor" },
                "configurations": {
                  "type": "object",
                  "additionalProperties": { "$ref": "#/definitions/targetOptions/definitions/protractor" }
                }
              }
            },
            {
              "type": "object",
              "properties": {
                "builder": { "const": "@angular-devkit/build-angular:server" },
                "options": { "$ref": "#/definitions/targetOptions/definitions/server" },
                "configurations": {
                  "type": "object",
                  "additionalProperties": { "$ref": "#/definitions/targetOptions/definitions/server" }
                }
              }
            },
            {
              "type": "object",
              "properties": {
                "builder": { "const": "@angular-devkit/build-angular:tslint" },
                "options": { "$ref": "#/definitions/targetOptions/definitions/tslint" },
                "configurations": {
                  "type": "object",
                  "additionalProperties": { "$ref": "#/definitions/targetOptions/definitions/tslint" }
                }
              }
            }
          ]
        }

server 看到

"stylePreprocessorOptions": {
        "description": "Options to pass to style preprocessors",
        "type": "object",
        "properties": {
        "includePaths": {
            "description": "Paths to include. Paths will be resolved to project root.",
            "type": "array",
            "items": {
            "type": "string"
            },
            "default": []
        }
        },
        "additionalProperties": false
    },

** 此时小伙伴，你想到了什么**

本文作者：前端首席体验师(CheongHu)
联系邮箱：simple2012hcz@126.com
版权声明：本文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！