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