angular 控件css_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