Angular中支持SCSS的方法


Posted in Javascript onNovember 18, 2017

scss介绍

SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。也就是说,任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外,SCSS 还能识别大部分 CSS hacks(一些 CSS 小技巧)和特定于浏览器的语法,例如:古老的 IE filter 语法。

由于 SCSS 是 CSS 的扩展,因此,所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作。也就是说,对于一个 Sass 用户,只需要理解 Sass 扩展部分如何工作的,就能完全理解 SCSS。大部分扩展,例如变量、parent references 和 指令都是一致的;唯一不同的是,SCSS 需要使用分号和花括号而不是换行和缩进

在为组件添加样式时,为了样式的模块化,通常我们会使用SCSS、SASS。那么如何让我们的Angular工程支持SCSS或者SASS呢?下面将从以下两中方式来介绍:

  1. 创建工程时来指定
  2. 修改当前的工程

1、创建工程时来指定

在指定目录下运行:ng new myProject ?style=scss

注:这里使用的Angular的CLI来创建工程的。

如果要指定SASS,则将scss换为sass即可。

2、修改当前工程

修改angular-cli.json文件,主要有两个地方需要修改:

将defaults中styleExt值设置为scss

"defaults": {
  "styleExt": "scss",
  "component": {}
 }

这样我们在运行ng g component myComponent 等命令生成文件时,默认后缀就是scss

在apps下的styles中将styles.css修改为styles.scss

"apps": [
  {
   "root": "src",
   "outDir": "dist",
   "assets": [
    "assets",
    "favicon.ico"
   ],
   "index": "index.html",
   "main": "main.ts",
   "polyfills": "polyfills.ts",
   "test": "test.ts",
   "tsconfig": "tsconfig.app.json",
   "testTsconfig": "tsconfig.spec.json",
   "prefix": "app",
   "styles": [
    "styles.scss"
   ],
   "scripts": [],
   "environmentSource": "environments/environment.ts",
   "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
   }
  }
 ],

注:不要忘记修改style.css文件的后缀。

angularcli 转变css工程为scss工程

方法一:

新增的时候就默认为scss

ng new My_New_Project --style=scss

方法二:

1、修改.angular-cli.json配置文件:

"defaults": {
   "styleExt": "scss",
}
"styles": [
    "styles.scss"
   ],

2、在src目录下新增文件_variables.scss

3、style.scss文件里配置如下:

@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
自动检查并替换文本框内的字符
Jun 30 Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
bootstrap中的 form表单属性role="form"的作用详解
Jan 20 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
详解vue-cli3使用
Aug 14 Javascript
微信小程序wx:for循环的实例详解
Oct 07 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
VUE element-ui 写个复用Table组件的示例代码
Nov 18 #Javascript
jQuery实现checkbox的简单操作
Nov 18 #jQuery
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 #Javascript
基于jquery实现五星好评
Nov 18 #jQuery
基于JavaScript实现五子棋游戏
Aug 26 #Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 #Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 #Javascript
You might like
星际中的相关伤害
2020/03/04 星际争霸
php中文件上传的安全问题
2006/10/09 PHP
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
计算一段日期内的周末天数的php代码(星期六,星期日总和)
2009/11/12 PHP
php设计模式小结
2013/02/15 PHP
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
python处理csv数据的方法
2015/03/11 Python
Python实现批量读取word中表格信息的方法
2015/07/30 Python
python snownlp情感分析简易demo(分享)
2017/06/04 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
材料加工硕士生求职信
2013/10/10 职场文书
基层党员公开承诺书
2014/05/29 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
贪污检举信范文
2015/03/02 职场文书
毕业实习感受与体会
2015/05/26 职场文书
python超详细实现完整学生成绩管理系统
2022/03/17 Python