学习网站:http://www.angulartypescript.com/angular-2-sass/css
一,使用scss,利用再package.json中建立scss和gulp的环境来实现自动将scss转化为css,而且放入指定目录,其中涉及的依赖包:node
autoprefixer:自动为scss中key值和value值添加前缀的,例如:display:flex; 利用autoprefixer转化后:web
display: -ms-flexbox;
display: -webkit-box;
concurrently:同时运行多个命令,经常使用命令以下:typescript
concurrently --kill-others "npm run watch-js" "npm run watch-less"npm
若是其中一个命令die,那么其余命令自动diejson
cssnano:执行各类优化,删除空白和注释,压缩代码gulp
gulp:构建管理工具sass
gulp-ext-replace:利用gulp能够改变文件扩展名服务器
gulp-imagemin:压缩jpeg,png,gif和svg图片babel
gulp-postcss:利用以前的autoprefixer和cssnano等多个预处理器同时处理css文件,并且只需一次
gulp-sass:在gulp中编译scss文件
gulp-sourcemaps:在编译sass文件时会生成对应的map文件,当你在调试的时候就能够看到哪些div样式对应哪些sass代码
gulp-typescript-babel:将typescript代码编译成ES2015,而后将ES2015编译成ES5代码
gulp-uglify:压缩js文件
lite-server:轻量的node服务器
postcss:经过js插件将转化css代码
postcss-scss:将scss代码修饰成更加接近css代码
precss:容许你在你的css中使用相似sass的标记,例如变量,运算等等