详解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字符串拼接的效率问题
Dec 25 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 Javascript
JavaScript闭包详解
Feb 02 Javascript
谈一谈javascript闭包
Jan 28 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 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
关于PHP自动判断字符集并转码的详解
2013/06/26 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
nodejs提示:cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
django rest framework serializers序列化实例
2020/05/13 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
Python里面如何实现tuple和list的转换
2012/06/13 面试题
硕士研究生自我鉴定
2013/11/08 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
C++程序员求职信
2014/05/07 职场文书
个人剖析材料范文
2014/09/30 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL