Angular CLI在Angular项目中如何使用scss详解


Posted in Javascript onApril 10, 2018

前言

SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。也就是说,任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外,SCSS 还能识别大部分 CSS hacks(一些 CSS 小技巧)和特定于浏览器的语法,例如:古老的 IE filter 语法。

由于 SCSS 是 CSS 的扩展,因此,所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作。也就是说,对于一个 Sass 用户,只需要理解 Sass 扩展部分如何工作的,就能完全理解 SCSS。大部分扩展,例如变量、parent references 和 指令都是一致的;唯一不同的是,SCSS 需要使用分号和花括号而不是换行和缩进。

Angular CLI支持多种css预处理,包括:

  • css
  • scss
  • less
  • sass
  • styl (stylus)

默认值为css。

Angular有两种方式指定css预处理。下面以scss为例:

新建项目指定css预处理

在新建angular项目是使用--style指定css预处理

ng new my-project --style=scss

已有项目指定css预处理

对于已有的项目,也是支持修改css预处理。

查看.angular-cli.json,在defaults配置项里有类似下面的声明:

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

使用set指令修改styleExt

ng set defaults.styleExt scss

如果项目统一使用scss,建议把项目里的css文件改为scss,记得也要修改其他文件对css文件的引用。其中styles.css的引用在.angular-cli.json里。

参考:stories css processors

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript 参考教程
Dec 29 Javascript
JavaScript全局函数使用简单说明
Mar 11 Javascript
利用cookie记住背景颜色示例代码
Nov 04 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
悬浮数字的实现案例
Feb 19 Javascript
indexOf 和 lastIndexOf 使用示例介绍
Sep 02 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
javascript设置页面背景色及背景图片的方法
Dec 29 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
JS实现的Unicode编码转换操作示例
Apr 28 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 Javascript
vue2.0+koa2+mongodb实现注册登录
Apr 10 #Javascript
bing Map 在vue项目中的使用详解
Apr 09 #Javascript
详解Vue打包优化之code spliting
Apr 09 #Javascript
node实现基于token的身份验证
Apr 09 #Javascript
vue-cli扩展多模块打包的示例代码
Apr 09 #Javascript
webpack中的热刷新与热加载的区别
Apr 09 #Javascript
vue写一个组件
Apr 09 #Javascript
You might like
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
JS打开新窗口的2种方式
2013/04/18 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
理解 JavaScript Scoping & Hoisting(二)
2015/11/18 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
python批量修改文件名的实现代码
2014/09/01 Python
python字符串连接方法分析
2016/04/12 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
python视频按帧截取图片工具
2019/07/23 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
国际象棋商店:The Chess Store
2018/07/09 全球购物
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
艺术爱好者的自我评价分享
2013/10/08 职场文书
质量保证书格式模板
2015/02/27 职场文书
会议简报格式范文
2015/07/20 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫