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 相关文章推荐
不用写JS也能使用EXTJS视频演示
Dec 29 Javascript
JS 文件本身编码转换 图文教程
Oct 12 Javascript
JavaScript 动态创建VML的方法
Oct 14 Javascript
理解Javascript_11_constructor实现原理
Oct 18 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
JavaScript中的Function函数
Aug 27 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
详解vue-cli3开发Chrome插件实践
May 29 Javascript
vue - vue.config.js中devServer配置方式
Oct 30 Javascript
vue data恢复初始化数据的实现方法
Oct 31 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
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
初学CAKEPHP 基础教程
2009/11/02 PHP
php动态实现表格跨行跨列实现代码
2012/11/06 PHP
php简单统计字符串单词数量的方法
2015/06/19 PHP
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
浅谈JS运算符&&和|| 及其优先级
2016/08/10 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
Angular.js之作用域scope'@','=','&'实例详解
2017/02/28 Javascript
Javascript实现倒计时时差效果
2017/05/18 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
Python pickle模块用法实例分析
2015/05/27 Python
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
python编程嵌套函数实例代码
2018/02/11 Python
关于Python的一些学习总结
2018/05/25 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
Python定义一个函数的方法
2020/06/15 Python
python使用建议技巧分享(三)
2020/08/18 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
python 如何调用 dubbo 接口
2020/09/24 Python
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
C#笔试题集合
2013/06/21 面试题
职业生涯规划书的格式
2013/12/29 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
个人培训总结
2015/03/05 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书