Angular学习笔记63：手动把项目的 CSS 预编译器改成 Less

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展.

在创建项目的时候指定预编译器

在Angular/cli 7.3.8 版本创建一个项目时，Angular/cli 工具提供了多个预编译器来选，这个时候就可以指定为Less就可以了

wujiayudeMBP:~ wjy$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 7.3.8
Node: 8.16.0
OS: darwin x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.13.8
@angular-devkit/core         7.3.8
@angular-devkit/schematics   7.3.8
@schematics/angular          7.3.8
@schematics/update           0.13.8
rxjs                         6.3.3
typescript                   3.2.4
    
wujiayudeMBP:~ wjy$ ng new demo
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? (Use arrow keys)
❯ CSS 
  SCSS   [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax ] 
  Sass   [ http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html       ] 
  Less   [ http://lesscss.org                                                 ] 
  Stylus [ http://stylus-lang.com            

将已经有的项目将预编译器改成 Less

Angular/cli 默认的预编译器时CSS，将编译器改成 Less步骤如下：

1. 修改angular-cli.json里面的 schematics

在schematics对象中添加如下

 "@schematics/angular:component": {
          "style": "less"
        }

修改之后如下：

"schematics": {
        "@schematics/angular:component": {
          "style": "less"
        }
      },

保存angular-cli.json 文件以后使用命令

ng g c componentName

生成的组件的样式文件就是less的了

修改前生成一个组件

wujiayudeMBP:demo wjy$ ng g c demo2
CREATE src/app/demo2/demo2.component.css (0 bytes)
CREATE src/app/demo2/demo2.component.html (20 bytes)
CREATE src/app/demo2/demo2.component.spec.ts (621 bytes)
CREATE src/app/demo2/demo2.component.ts (265 bytes)
UPDATE src/app/app.module.ts (701 bytes)

修改后生成一个组件

wujiayudeMBP:demo wjy$ ng g c demo3
CREATE src/app/demo3/demo3.component.less (0 bytes)
CREATE src/app/demo3/demo3.component.html (20 bytes)
CREATE src/app/demo3/demo3.component.spec.ts (621 bytes)
CREATE src/app/demo3/demo3.component.ts (266 bytes)
UPDATE src/app/app.module.ts (779 bytes)

2. 修改angular-cli.json里面的 styles.css 后缀改成 .less

为了不留下技术债，最好将test对象中的styles.css 后缀也改成 .less

3. 将src目录下面 style.css 改成 style.less

修改这个文件：

修改后：

4. 修改已经有组件的样式文件

• 1. 将每个组件中的 componentName.component.css改成componentName.component.less

例如：将组件demo2的 demo2.component.css 改为demo2.component.less

• 2. 修改类文件的元数据

将这里 styleUrls中的 ‘./demo2.component.css’ 改成’./demo2.component.less’

全部更改完以后，执行

npm run start

或者

ng serve

就可以看到效果了。

Less参考文档

W先生的Less简单教程
Less官方网站
Less中文网