###背景
- 寻找替代方案,入门可以[参考](https://juejin.im/post/5def66ae6fb9a0162b7f2f07 )。
###小插曲
- 基于组件思想,尝试把组件样式,放到组件同级目录*将ag-grid css样式发布到app.component.scss中,非styles.css中
@import“ 〜AG-网社区/距离/风格/ AG-grid.css”; @import“ 〜ag-grid-community / dist / styles / ag-theme-balham.css”;
- 界面样式,心里立刻万马奔腾〜基于之前的[ngular组件样式封装](https://juejin.im/post/5dd368c3f265da0c0c1fea9c ),立即可能是组件样式封装问题。 app.component.ts中修改如下,效果立即恢复〜
@Component({选择:‘应用根’,templateUrl:’./ app.component.html’,styleUrls:[” ./app.component.scss’],封装: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)
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦