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 相关文章推荐
基于jquery的复制网页内容到WORD的实现代码
Feb 16 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
js 赋值包含单引号双引号问题的解决方法
Feb 26 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 Javascript
JS实现的邮箱提示补全效果示例
Jan 30 Javascript
解决JavaScript layui 下拉框不显示的问题
Aug 14 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
详解vue 项目白屏解决方案
Oct 31 Javascript
TypeScript类型声明书写详解
Aug 28 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
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命令行用法入门实例教程
2014/10/27 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
2016/06/13 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
2017/07/18 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
Python正则抓取网易新闻的方法示例
2017/04/21 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
先进党支部事迹材料
2014/01/13 职场文书
2014学雷锋活动心得体会
2014/03/10 职场文书
党员活动日总结
2014/05/05 职场文书
国际金融专业自荐信
2014/07/05 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
MySQL 原理与优化之Update 优化
2022/08/14 MySQL