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

zhiwei 发布于2019-08-22 18:35 / 1775人阅读

摘要：全新的的项目有全新的配置文件，版本的配置文件为，其结构已经发生很大的变化，下面是基于版本改，并通过变量自定义的主题的方法和碰到的一些问题修改文件修改文件下面的中的指定项目构建时导入的样式文件改为你自定义的文件相应的文件，小伙伴先注意这个

全新的的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-devkituild-angularsrcangular-cli-filesmodelswebpack-configsstyles.js line 136和142行（由于版本不一样文件的位置也不一样），lessPathOptions这个对象，加入属性lessPathOptions.javascriptEnabled = true

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

现在项目就能完美运行了，接下来就可以按照ng-zorro的官方教程做自定义样式和字体本地化了

GPU云服务器云服务器 TOB主题2.7版本 XIU主题8.2版本 DUX主题7.4版本更新升级mysql5.6

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96032.html

Angular 项目国际化

摘要：正如官网所说，项目国际化是一件具有挑战性，需要多方面的努力持久的奉献和决心的任务。本文将介绍项目的国际化方案，涉及静态文件和文件文案的国际化。参考目录的国际化在线例子国际化正如angular官网所说，项目国际化是一件具有挑战性，需要多方面的努力、持久的奉献和决心的任务。本文将介绍angular项目的国际化方案，涉及静态文件(html)和ts文件文案的国际化。背景 Angular:...

cncoder 2019-08-21 18:39 评论0 收藏0
前端学习路线

摘要：具体来说，包管理器就是可以通过命令行，帮助你把外部库和插件放到你的项目里面并在之后进行版本升级，这样就不用手工复制和更新库。现在有的包管理器主要是和。一、基础 1、学习HTML基础 HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上：学习HTML基础，了解如何编写语义HTML 理解如何把网页分...

20171112 2019-08-29 15:12 评论0 收藏0
前端学习路线

摘要：具体来说，包管理器就是可以通过命令行，帮助你把外部库和插件放到你的项目里面并在之后进行版本升级，这样就不用手工复制和更新库。现在有的包管理器主要是和。一、基础 1、学习HTML基础 HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上：学习HTML基础，了解如何编写语义HTML 理解如何把网页分...

FullStackDeveloper 2019-08-22 16:48 评论0 收藏0
初探react技术栈（一）

摘要：相信用的同学也不少找到函数在其中中添加启用编译。。。react 最近已经开始使用react技术栈了，从头开始搭建项目，有必要的记录一下配置的过程以及项目分层的思路，这次后台项目采用的主要采用react-create-app脚手架以及Ant DesignUI 以及多语言react-intl create-react-app 这是官方维护的脚手架应用我们一般也采用这个 $ npm or c...

刘玉平 2019-05-23 16:23 评论0 收藏0