黑马程序员技术交流社区

标题: 【太原校区】零基础学习angular5.0(二)【每周更新】 [打印本页]

作者: 郝永亮    时间: 2017-11-30 15:07
标题: 【太原校区】零基础学习angular5.0(二)【每周更新】
本帖最后由 郝永亮 于 2017-11-30 15:15 编辑

这一节配置CSS编译工具

.


       SASS 是一款非常好用的 CSS 预编译器,Bootstrap 官方从4.0开始已经切换到了 SASS。
目前(2017-10),@angular/cli 创建项目的时候没有自动使用 SASS 作为预编译器,我们需要自己手动修改一些配置文件,请按照以下步骤依次修改:

1.1 angular-cli.json 里面的 styles.css 后缀改成 .scss
         
当你后面再使用 ng g c *** 自动创建组件的时候,默认就会生成 .scss 后缀的样式文件了。

1.2 angular-cli.json 里面的 styleExt 改成 .scss
        

1.3 src 下面 style.css 改成 style.scss
        

1.4 app.component.scss
        

1.5 app.component.ts 里面对应修改
        

改完之后,重新 ng serve,打开浏览器查看效果。


小结

SASS 的 API 请参考官方网站
SASS 只是一个预编译器,它支持所有 CSS 原生语法。利用 SASS 可以提升你的 CSS 编码效率,增强 CSS 代码的可维护性,但是千万不要幻想从此就可以不用学习 CSS 基础知识了。










欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2