angular4.0使用sass

一、为什么选择sass

为了更好的管理代码，我们需要可以定义变量，同时可以使用函数的样式工具，比如定义公用color、bg。显然css无法满足需求。

现在市面上常用的是sass、less。经过比较，我选择sass，因为sass更加接近css的写法。

二、配置sass

1、利用npm工具安装sass依赖和loader

npm install node-sass --save-dev
npm install sass-loader --save-dev

2、修改.angular-cli.json文件

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

注意：不用怀疑是不是写错了，不是sass，就是改成scss

3、将项目中已经存在的.css文件改成.scss【项目会自动修改的】

4、新建的component项目会直接生成.scss文件

ok，就是这样简单！