把CSS预编译器改成SASS

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

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

angular-cli.json 里面的 styleExt 改成 .scss
enter image description here

src 下面 style.css 改成 style.scss
enter image description here

app.component.scss
enter image description here

app.component.ts 里面对应修改
enter image description here

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容