把CSS预编译器改成SASS

简介: 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,打开浏览器查看效果。

相关文章
|
5月前
|
前端开发 IDE JavaScript
探秘 Sass 之路:掌握强大的 CSS 预处理器(上)
探秘 Sass 之路:掌握强大的 CSS 预处理器(上)
|
4天前
|
存储 前端开发 开发者
深入了解 Sass 和 SCSS:CSS 预处理器的强大功能
Sass(Syntactically Awesome Stylesheets)是一个强大的 CSS 预处理器,为开发者提供了诸多高级特性,如变量、嵌套、混合、继承等,简化了 CSS 的编写和管理。SCSS 是 Sass 3 引入的新语法,完全兼容 CSS3,并增强了 Sass 的动态功能。本文详细介绍了 Sass 和 SCSS 的核心特性及其在实际开发中的应用,如变量定义、嵌套规则、混合、继承、以及常用的操作符与扩展功能。
13 0
|
4天前
|
前端开发 开发者 容器
Vue3中Sass的安装与使用指南:轻松上手CSS预处理器
Vue3中Sass的安装与使用指南:轻松上手CSS预处理器
11 0
|
3月前
|
前端开发 C++
CSS预处理器之Sass(一)
CSS预处理器之Sass(一)
39 2
|
3月前
|
前端开发 JavaScript
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
62 0
|
3月前
|
前端开发
CSS预处理器之Sass(三)
CSS预处理器之Sass(三)
22 0
|
3月前
|
前端开发 JavaScript
CSS预处理器之Sass(二)
CSS预处理器之Sass(二)
25 0
|
5月前
|
XML 前端开发 数据格式
探索CSS预处理器:Sass、Less与Stylus
探索CSS预处理器:Sass、Less与Stylus
|
5月前
|
前端开发
【专栏:CSS进阶篇】CSS变量与预处理器(Sass/Less)
【4月更文挑战第30天】本文探讨了CSS变量和预处理器Sass的使用,以提升开发效率和代码可维护性。CSS变量通过--*语法定义,可在文档范围内重用,减少冗余,提高可维护性。Sass预处理器引入了变量、嵌套规则、混合和函数等特性,使CSS编写更简洁、可维护。Sass变量使用$符号定义,支持嵌套规则和混合,如定义border-radius混合以减少重复代码。Sass的高级功能使其成为强大工具。
130 0
|
5月前
|
前端开发
【专栏】在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法
【4月更文挑战第29天】本文介绍了在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法。首先,通过 `npm` 安装 less 或 sass 依赖,然后修改 `config-overrides.js` 配置文件以支持 less/sass 编译。接着,详细阐述如何使用 less/sass 编写样式。再者,安装 react-css-modules 并配置 webpack,使能样式模块化。最后,展示了如何结合使用 less/sass 和 react-css-modules,以提升前端开发的效率和代码质量。
441 0