angular2项目如何使用sass

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文件。