NG-ZORRO1.x自定义主题
1、安装Angular脚手架
$ npm install -g @angular/cli
2、创建Angular6.x项目名为myzorro
$ ng new myzorro
3、初始化配置ng-zorro
$ ng add ng-zorro-antd
配置成功,如下图所示:
4、执行ng serve命令,查看localhost:4200页面,页面出现ng-zorro图标,即为ng-zorro基础配置成功。
5、如若需要使用自定义主题,执行$ ng add ng-zorro-antd —theme
如上图,项目中创建src/theme.less文件。
6、自定义主题,最主要的操作在于src/theme.less文件,
ng-zorro默认主题颜色是以 @primary-color : @blue-6;颜色#1890ff为主色调。
默认主题示例:
需要修改主题颜色时,只需要将theme.less中需要修改的样式修改即可:
但是!!!页面上还是原来的蓝色,没有一点变化。
问题出在了angular.json文件中,
删除引用"node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css”
重新ng serve 查看页面
颜色已经主题已经变了,说明自定义主题生效。
感谢ng-zorro为Angular6提供的ant-design~
官方github:https://github.com/NG-ZORRO/ng-zorro-antd