详解Angular-cli生成组件修改css成less或sass的实例


Posted in Javascript onJuly 27, 2017

详解Angular-cli生成组件修改css成less或sass的实例

使用cli命令生成组件:

ng generate component 组件名

生成出来的组件文件有:html / ts / css / spec.ts

问题我是一个less重度患者怎么可能再去写css呢。

于是我就在想使用cli生成组件的时候能直接生成出来的是less文件而不是css文件;

修改angular-cli.json文件:

apps 
  "styles": [
    "styles.less"
  ]
"defaults": 
  "styleExt": "less",

这样就能用组件命令生成的时候替换css文件成less文件

但是angular代码会报错,需要去修改所有的.css文件成.less文件。

ts文件内引用的styleUrls里面的css修改成less

cli编辑不报错了

less编译问题:

less less-loader

sass文件的操作如上一样

 以上就是对Angular-cli生成组件修改css成less或sass的实例详解,如有疑问请留言或者到本站社区交流讨论,本站关于AngularJS 的文章还有很多,欢迎大家搜索查阅,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Javascript 面向对象(二)封装代码
May 23 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
jQuery实现获取h1-h6标题元素值的方法
Mar 06 Javascript
关于node-bindings无法在Electron中使用的解决办法
Dec 18 Javascript
js中arguments对象的深入理解
May 14 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 16 Javascript
js实现数字跳动到指定数字
Aug 25 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 #Javascript
基于构造函数的五种继承方法小结
Jul 27 #Javascript
vue中各组件之间传递数据的方法示例
Jul 27 #Javascript
微信小程序 页面跳转传值实现代码
Jul 27 #Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 #Javascript
关于JavaScript中forEach和each用法浅析
Jul 27 #Javascript
Easyui使用Dialog行内按钮布局的实例
Jul 27 #Javascript
You might like
一个改进的UBB类
2006/10/09 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
vue中axios请求的封装实例代码
2019/03/23 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
Python实现Linux中的du命令
2017/06/12 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
如何基于python操作excel并获取内容
2019/12/24 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
2014年大学团支部工作总结
2014/12/02 职场文书
2015年党员承诺书
2015/01/21 职场文书
2016年端午节寄语
2015/12/04 职场文书
python自动化测试之Selenium详解
2022/03/13 Python