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
   配置成功,如下图所示:
NG-ZORRO1.x自定义主题_第1张图片

4、执行ng serve命令,查看localhost:4200页面,页面出现ng-zorro图标,即为ng-zorro基础配置成功。

NG-ZORRO1.x自定义主题_第2张图片

5、如若需要使用自定义主题,执行$ ng add ng-zorro-antd  —theme

NG-ZORRO1.x自定义主题_第3张图片

如上图,项目中创建src/theme.less文件。
6、自定义主题,最主要的操作在于src/theme.less文件,
ng-zorro默认主题颜色是以 @primary-color : @blue-6;颜色#1890ff为主色调。
NG-ZORRO1.x自定义主题_第4张图片

默认主题示例:

NG-ZORRO1.x自定义主题_第5张图片
需要修改主题颜色时,只需要将theme.less中需要修改的样式修改即可:

NG-ZORRO1.x自定义主题_第6张图片

但是!!!页面上还是原来的蓝色,没有一点变化。
问题出在了angular.json文件中,

NG-ZORRO1.x自定义主题_第7张图片


删除引用 "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css
重新ng serve 查看页面

NG-ZORRO1.x自定义主题_第8张图片

颜色已经主题已经变了,说明自定义主题生效。 


感谢ng-zorro为Angular6提供的ant-design~

官方github:https://github.com/NG-ZORRO/ng-zorro-antd

你可能感兴趣的:(WEB前端开发,Angular2+)