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这两个文件和其他文件夹后面一一说一下

angular@^6项目sass改less,修复ng-zorro升级@^1.1.0版本,定义主题中出现的less bug

下面是新自定义的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的官方教程做自定义样式和字体本地化了

相关推荐