angular@^6項目sass改less，修復ng-zorro升級@^1.1.0版本,定義主題中出

zhiwei 發(fā)布于2019-08-22 18:35 / 1768人閱讀

摘要：全新的的項目有全新的配置文件，版本的配置文件為，其結(jié)構(gòu)已經(jīng)發(fā)生很大的變化，下面是基于版本改，并通過變量自定義的主題的方法和碰到的一些問題修改文件修改文件下面的中的指定項目構(gòu)建時導入的樣式文件改為你自定義的文件相應的文件，小伙伴先注意這個

全新的的angular@^6項目有全新的配置文件angular.json，@<6版本的配置文件為angular-cli.json，其結(jié)構(gòu)已經(jīng)發(fā)生很大的變化，下面是基于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中的指定項目構(gòu)建時導入的樣式文件改為你自定義的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 "......";  //進入其他樣式，這些樣式可以根據(jù)業(yè)務細分建成相應的文件夾和文件，如圖

這時候運行項目會包如下錯誤，大體是 bezierEasingMixin()函數(shù)不好使 javascript被禁用，解決方法，在
node_modules@angular-devkituild-angularsrcangular-cli-filesmodelswebpack-configsstyles.js line 136和142行（由于版本不一樣文件的位置也不一樣），lessPathOptions這個對象，加入屬性lessPathOptions.javascriptEnabled = true

    let lessPathOptions = { paths: [], javascriptEnabled: true};
    if (......);
        lessPathOptions = {
            paths: includePaths,
            javascriptEnabled: true
        };
    }

現(xiàn)在項目就能完美運行了，接下來就可以按照ng-zorro的官方教程做自定義樣式和字體本地化了