如何管理你项目中的SASS文件

之前的一篇文章大概地说了一下SASS的语法，这篇我想说说如何把它用在实际项目中。

使用了SASS的中大型项目一般对CSS文件有着明显的分工，大致分为：

RESET，统一浏览器之间的样式差异，重置样式，如某些默认的margin。网上也有很多成熟的案例，可以参照自己的习惯来自己写一个。

MIXIN，统一SASS中的minxin，每个人用mixin的习惯不同，有一个自己惯用的mixin很重要。例如一些常用的居中样式，清除浮动的样式等，合理使用mixin可以提升开发效率。

COMMON，项目的通用样式，有些不大的项目，复用组件的样式也可以放在这。

APP，各个页面的独立样式，项目页面比较多的话也可以拆开成为多个页面引入，结构会更清晰点。

为了避免项目有开发中要求换主题颜色的情况，我们在设定主题色的时候，最好不要写死颜色值，可以用SASS的变量定义一个base_color来代替。

因为常用的环境是webpack+node，所以编译一般交给webpack去完成。webpack会把所有资源打包到一个bundle.js文件中，这么做的话往往会让bundle.js文件体积过大，不方便加载，大多数时间CSS都是要独立出来打包成一个文件，然后交给CDN方便浏览器缓存。

要用到一个插件：extract-text-webpack-plugin

npm安装：

npm install extract-text-webpack-plugin --save-dev

在webpack.config.js中使用插件：

var ExtractPlugin=require("extract-text-webpack-plugin") //引入插件

var CSSPack=new ExtractPlugin('./css/[name].min.css') //设置路径和名称，[name]为单独打包出来的css文件名

plugins:[CSSPack] //在插件中引用

最后还是要在入口文件entry.js中引入我们需要单独打包的CSS,SASS,SCSS文件（SASS,SCSS需要先配置loader）。

（PS：我们只希望把我们需要的SASS内容做编译和打包，对于一些mixin之类的我们只在预处理的时候使用，并不需要编译到实际文件中，这时候需要在那些文件前加下划线：_mixin.scss，这样就可以实现引用文件里面的内容但不把它编译了）