Angular CLI 生成项目时css less scss样式使用说明

发布时间:2019-06-17 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Angular CLI 生成项目时css less scss样式使用说明脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

通过Angular-CLI命令行工具创建可指定样式的项目
step1.创建采用css的Angular项目

ng new test1

默认会生成一个新的angular项目,检查angular-cli.json配置文件会发现:

"defaults": {
    "styleExt": "css",
    "component": {}
  }

step2.利用CLI命令行创建采用scss的angular项目

ng new test2 --style=scss

检查angular-cli.json的配置

"defaults": {
    "styleExt": "scss",
    "component": {}
  }

steP3.利用CLI命令航创建采用less的angular项目

@H_304_88@ng new test --style=less

1)检查angular-cli.json的配置

"defaults": {
    "styleExt": "less",
    "component": {}
  }

2)截图可以看到生成了一个style.less文件

Angular CLI 生成项目时css less scss样式使用说明

3)检查angular-cli.json看配置发现引用的样式是styles.less

Angular CLI 生成项目时css less scss样式使用说明

思考:
1.如果创建项目时指定了采用css,less或者scss,那么使用过程中可以在组件的styleUrl中配置任意的样式吗?
实际项目过程中验证:
如果默认采用less进行指定styles的话,在通过angular-cli命令创建组件
$ ng g c cmp1
create src/app/cmp1/cmp1.COMponent.less (0 bytes)
create src/app/cmp1/cmp1.component.htML (23 bytes)
create src/app/cmp1/cmp1.component.sPEc.ts (614 bytes)
create src/app/cmp1/cmp1.component.ts (262 bytes)
update src/app/app.module.ts (388 bytes)
创建的组件默认会创建一个less文件而不是.css文件,保持了angular-cli命令行的一致性。同理css和scss也是一样的表现。
2.默认采用css如果手工不通过angular-cli命令进行组件创建,指定less或者scss,angular会识别吗?
经过实际项目验证,默认为css,创建组件指定为scss或者less,ng build打包也是可以识别的可见angular的编译还是很聪明的,考虑了混合的场景。

如果需要修改全局angular配置,也就是不输入--style 就能创建出 scss或者less,则通过如下修改方式进行:

ng set --global defaults.styleExt scss

不过,个人不太推荐随意修改全局配置,个性话配置还是在项目中处理比较好。

脚本宝典总结

以上是脚本宝典为你收集整理的Angular CLI 生成项目时css less scss样式使用说明全部内容,希望文章能够帮你解决Angular CLI 生成项目时css less scss样式使用说明所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。