angular/cli支持使用sass
新建工程:
如果是新建一个angular工程采用sass:
ng new My_New_Project --style=sass
这样所有样式的地方都将采用sass样式,如果需要使用sass的scss语法,还可以如下方式:
ng new My_New_Project --style=scss
然后需要手动安装node-sass:
npm install node-sass --save-dev
这样就可以实现用sass语法做样式了。
已有angular-cli工程改为sass
如果是已经新建了工程,需要切换到sass,则采用如下方法:
首先同样安装sass需要的node-sass包
npm install node-sass --save-dev 
然后修改已有项目的.angular-cli.json配置文件:
首先修改最后的defaults标签
  • SASS 语法修改为
    "defaults": {

         "styleExt": "sass",

    }
  • SCSS语法修改为
    "defaults": {

         "styleExt": "scss",

    }
然后修改styles标签
"styles": [

        "styles.css"

      ],
其中的css修改为sass或scss。
并把全局style.css文件改为style.scss或style.sass。
安装node-sass注意事项
另外,安装node-sass由于需要连接github在连接aws,很难成功,需要在.npmrc文件中再加入如下内容,让这些连接也都只连接淘宝镜像:
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
总结:
目前尝试的这种样式写法不支持内置在组建当中的styles,主要在组建中庸styleUrls引用外部sass文件。

angular2项目如何使用sass的更多相关文章

  1. 关于npm构建angular2项目问题

    我在win10系统下用npm构建好angular2项目之后,在命令行下运行 ng serve --open,报一下错误: Unknown browser query 'basedir=$(dirnam ...

  2. vue项目中引入Sass

    Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...

  3. [Vscode插件] 自动编译项目中的Sass文件为CSS

    插件名 : Live Sass Compiler 今天在VSCode中发现了一个自动watch项目目录下sass文件的插件,摆脱了在控制台中进行手动watch的繁琐. 安装好以后点击右下角即可自动编译 ...

  4. 如何在ASP.NET 5上搭建基于TypeScript的Angular2项目

    一.前言 就在上月,公司的一个同事建议当前的前端全面改用AngularJs进行开发,而我们采用的就是ASP.NET 5项目,原本我的计划是采用TypeScript直接进行Angular2开发.所以借用 ...

  5. (三) Angular2项目框架搭建心得

    前言: 在哪看到过angular程序员被React程序员鄙视,略显尴尬,确实Angular挺值得被调侃的,在1.*版本存在的几个性能问题,性能优化的"潜规则"贼多,以及从1.*到2 ...

  6. 1.搭建Angular2项目

    简述:搭建angular2的开发环境,网上已经有许多教程,不过都是window系统下的教程,我本人使用的是linux系统,搭建环境的过程也稍微比前者麻烦了一点,可参考本人的另一篇文章Linux系统下安 ...

  7. 项目中使用sass,如何实现自动编译

    本次React项目中用到了Sass,在一个主文件main.scss中引入了其余的scss文件,然后把main.scss文件编译为main.css文件,最后在项目的主文件入口index.html中引入m ...

  8. angular2项目关于主页结构分析

    这里需要弄清楚两个问题: 一:主页模块如何加载进来 angular2的根模块应用加载之后便会根据根模块路由信息来加载主页模块 export const appRoutes=[ { path:'', r ...

  9. angular2项目关于Echarts图表的处理

    在NiceFish项目中关于Echarts组件和指令是直接注册在appModule根模块中的,这样路由只需这样写就可以让浏览器加载图标组件: 在chart组件视图中: <div class=&q ...

随机推荐

  1. VC++读取图像RGB值

    代码: #include <iostream> #include <fstream> #include <string> #include <windows. ...

  2. Dynamics CRM OData 查询超过50条记录的数据(Retrieving More than 50 records using OData)

    在通过ODdata方式获取CRM数据时,默认查询出来的results只有50条数据,可以通过JSON返回的Object中的"_next"属性作为URL循环获取直到该属性为空 示例代 ...

  3. IE11开发人员工具 js脚本debugger调试

    微软在浏览器IE11中对F12开发人员工具的UI进行了彻底的换脸,虽然有诸多的不习惯但也是有方便之处的,比如我们用到的最多的断点调试,在F12调试状态下会加载出页面的js脚本文件,而需要对某个文件中的 ...

  4. SpringMVC注解控制器详解

    主要包括四类:@Component.@Repository @Service.@Controller 说明: @Controller 控制层,就是我们的action层 @Service 业务逻辑层,就 ...

  5. Windows CE Notification API的使用方法

    1 引言      以Windows CE 为操作系统的掌上电脑(如PocketPC或HPC),除具备PC的功能外,还具备很强的自身控制能力.Windows CE API超越微软其他操作系统的 API ...

  6. infiniDB无法建表

    infiniDB无法建表,建表报错为: 最开始报错:Constraint is not supported by InfiniDB. 这是sql语句里面有的约束,infiniDB不支持. 如 CREA ...

  7. OpenCV特征点提取----Fast特征

    1.FAST(featuresfrom accelerated segment test)算法 http://blog.csdn.net/yang_xian521/article/details/74 ...

  8. 生产者消费者的java实现

    先看最简单的,也就是缓冲区的容量为1 缓冲区容量为1 import java.util.List; public class ProducerAndConsumer2 { static class A ...

  9. Leetcode_228_Summary Ranges

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/46762039 Given a sorted integer ...

  10. Herriot

    Herriot测试框架是Hadoop-0.21.0及以后版本中新加入的测试框架,它的出现主要是为了尽可能地模拟真实的大规模分布式系统,并且对该系统实现自动化测试.和Hadoop以前的测试框架MiniD ...