备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

把CSS预编译器改成SASS

2017-10-17 971
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： SASS 是一款非常好用的 CSS 预编译器，Bootstrap 官方从4.0开始已经切换到了 SASS。目前（2017-10），@angular/cli 创建项目的时候没有自动使用 SASS 作为预编译器，我们需要自己手动修改一些配置文件，请按照以下步骤依次修改：angular-cli.json 里面的 styles.css 后缀改成 .scssenter image description here当你后面再使用 ng g c *** 自动创建组件的时候，默认就会生成 .scss 后缀的样式文件了。

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

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

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

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

app.component.scss
img_9dd508c58856dd912c201baf375e6a18.png
enter image description here

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

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

文章标签：
前端开发
Java
编译器
关键词：
CSS SASS
互联网编程
目录
相关文章
阿珊和她的猫
|
3月前
|
前端开发 IDE JavaScript
探秘 Sass 之路：掌握强大的 CSS 预处理器(上)
探秘 Sass 之路：掌握强大的 CSS 预处理器(上)
阿珊和她的猫
38 0
时雨h
|
8天前
|
存储 前端开发 JavaScript
Sass：提升CSS开发效率的利器
Sass：提升CSS开发效率的利器
时雨h
11 0
游客moiomvrp3vyac2
|
2月前
|
前端开发 开发者
前端开发中的CSS预处理器Sass
在前端开发中，CSS预处理器Sass是一种非常实用的工具，能够提高代码的可维护性和扩展性。本文将介绍Sass的基本语法、特性以及在实际项目中的运用，帮助读者更好地理解和应用这一技术。
游客moiomvrp3vyac2
19 3
游客799
|
2月前
|
前端开发 开发者
前端开发中的CSS预处理器Sass
在前端开发中，CSS预处理器Sass是一种非常实用的工具，能够提高代码的可维护性和扩展性。本文将介绍Sass的基本语法、特性以及在实际项目中的运用，帮助读者更好地理解和应用这一技术。
游客799
11 0
阿珊和她的猫
|
3月前
|
前端开发 JavaScript 开发者
探秘 Sass 之路：掌握强大的 CSS 预处理器(下)
探秘 Sass 之路：掌握强大的 CSS 预处理器(下)
阿珊和她的猫
44 0
鋜斗
|
4月前
|
前端开发
Sass中如何使用选择器继承来精简CSS详细教程
Sass中如何使用选择器继承来精简CSS详细教程
鋜斗
33 0
鋜斗
|
4月前
|
前端开发 JavaScript 容器
Sass的嵌套CSS 规则详细教程
Sass的嵌套CSS 规则详细教程
鋜斗
41 0
coderJason2020
|
8月前
|
前端开发
CSS嵌套与Sass嵌套的区别
CSS 嵌套是指在 CSS 规则中嵌套选择器，以便更清晰地表示元素之间的层次关系。例如，使用 CSS 嵌套可以将子选择器放在父选择器内，使样式规则更具可读性。
coderJason2020
52 0
我在学前端
|
8月前
|
前端开发
CSS预处理器Sass和Less的使用指南（下）
CSS预处理器Sass和Less的使用指南（下）
我在学前端
55 0
我在学前端
|
8月前
|
资源调度 前端开发 JavaScript
CSS预处理器Sass和Less的使用指南（上）
CSS预处理器Sass和Less的使用指南（上）
我在学前端
93 0

热门文章

最新文章

  • 1
    《手把手教你》系列技巧篇（十八）-java+ selenium自动化测试-元素定位大法之By css中卷（详细教程）
  • 2
    【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（下）
  • 3
    《手把手教你》系列技巧篇（十七）-java+ selenium自动化测试-元素定位大法之By css上卷（详细教程）
  • 4
    前端代码整洁与规范之CSS篇
  • 5
    《手把手教你》系列技巧篇（十九）-java+ selenium自动化测试-元素定位大法之By css下卷（详细教程）
  • 6
    Tailwind CSS如何在vue项目中使用
  • 7
    【前端设计】HTML+CSS+JavaScript基本特性
  • 8
    【掰开揉碎】详解 CSS3 Grid 布局
  • 9
    解密CSS单位：px、em、vh的区别与应用
  • 10
    CSS 中BFC是什么？
  • 1
    CSS字型
    22
  • 2
    css元素
    13
  • 3
    如何使用代理IP通过HTML和CSS采集数据
    12
  • 4
    《CSS 简易速速上手小册》第6章：高级 CSS 技巧（2024 最新版）
    15
  • 5
    CSS cursor的一些相关属性
    11
  • 6
    css怎样设置下滑线？
    10
  • 7
    css中几种隐藏元素的方法
    10
  • 8
    js实用方法记录-动态加载css/js
    12
  • 9
    【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（下）
    40
  • 10
    【CSS进阶】巧用伪元素before和after制作绚丽效果（下）
    11

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • CSS基础教程
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）