angular@^6项目sass改less,修复ng-zorro升级@^1.1.0版本,定义主题中出现的less bug
全新的的angular@^6项目有全新的配置文件angular.json,@<6版本的配置文件为angular-cli.json,其结构已经发生很大的变化,下面是基于angular@^6版本sass改less,并通过less变量自定义ng-zorro的主题的方法和碰到的一些less问题
修改angular.json文件 schematics.@schematics/angular:component.styleext = less
"schematics": { "@schematics/angular:component": { ...... "styleext": "less" }, }
修改angular.json文件architect
下面的builder中的指定项目构建时导入的样式文件改为你自定义的less文件
"styles": [ "src/styles/styles.less" ],
相应的文件,小伙伴先注意styles.less这个文件,styles.var.less这两个文件和其他文件夹后面一一说一下
下面是新自定义的styles.less文件
@import "../../node_modules/ng-zorro-antd/src/ng-zorro-antd.less"; //引入ng-zorro的样式 @import './styles.var.less'; //自定义的less变量和覆盖ng-zorro的官方变量 @import "......"; //进入其他样式,这些样式可以根据业务细分建成相应的文件夹和文件,如图
这时候运行项目会包如下错误,大体是 bezierEasingMixin()
函数不好使 javascript被禁用,解决方法,在node_modules\@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\styles.js
line 136和142行(由于版本不一样文件的位置也不一样),lessPathOptions
这个对象,加入属性lessPathOptions.javascriptEnabled = true
let lessPathOptions = { paths: [], javascriptEnabled: true}; if (......); lessPathOptions = { paths: includePaths, javascriptEnabled: true }; }
现在项目就能完美运行了,接下来就可以按照ng-zorro的官方教程做自定义样式和字体本地化了
相关推荐
QiaoranC 2020-09-25
颤抖吧腿子 2020-09-04
liduote 2020-06-16
阿斌Elements 2020-06-11
xxuncle 2020-06-05
ChinaGuanq 2020-06-05
wanghongsha 2020-03-26
csm0 2020-03-05
shyoushine 2020-02-25
electronvolt 2020-02-12
jsonwoo 2020-01-20
ZadarrienChina 2020-01-07
wwwxuewen 2020-01-04
dynsxyc 2020-01-03
liangjielaoshi 2019-12-27
bowean 2019-12-27
wwwxuewen 2019-12-25
liwusen 2019-12-16
颤抖吧腿子 2019-12-16