SASS
安装
npm install --save-dev sass-loader
安装sass-loader以后会发现，package.json中多了一个node-sass依赖，这是使用SASS必须的。
配置
然后添加以下配置：
{
test: /\.s[ac]ss$/,
exclude: /node_modules/,
loader: 'style-loader!css-loader!sass-loader'
}
如上，配置中传递了三个加载器，相对于前文处理CSS文件的加载器，在最后面多了一个sass-loader，首先加载sass-loader加载器处理SASS文件成CSS代码，然后继续按照前文描述流程处理CSS文件。
EXTRACT TEXT PLUGIN
和处理CSS文件一样，上述配置最终通过style-loader将转换后的CSS代码内联到页面，我们需要使用Extract Text Plugin生成单独CSS文件，以外链方式引用：
{
test: /\.s[ac]ss$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract({
fallback:'style-loader',
use: [
'css-loader',
'sass-loader'
]
})
}
...
// 生成独立css文件
new ExtractTextPlugin({
filename: 'css/[name].css'
})
CSS后处理器
前面讲到CSS预处理器，如SASS，他们提供对CSS的拓展，包括语法拓展，高级特性拓展，如嵌套，变量，自动处理添加属性前缀等，使得我们可以以其定义的语法与模板方式更高效的编写CSS，然而这些预处理器都是另外对CSS进行拓展，各自定义了语法和模板，其处理流程是对代码进行解析处理，然后转换成CSS代码。
不同预处理器有各自的定义和规范，假如你需要从LESS转到SASS，源代码转换成本和学习成本颇高，而接下来要介绍的CSS后处理器并没有这个问题。
不同于预处理器预定义好一个语法和模板，然后对按照该语法和模板编写的代码进行处理转换成CSS，其输入是自定义语法文件，输出是CSS代码；后处理器（postprocessor）是对原生CSS代码根据配置进行处理，其输入输出依然是CSS代码。
POSTCSS
现在最受欢迎的CSS后处理器，就是postcss：
PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.
PostCSS是一个使用Js插件转换样式的根据，插件支持拓展CSS，如变量，混合，CSS属性语法兼容，行内图片等等功能。
特性
不同于SASS提供一个功能性拓展工具，postcss更多的是提供一个CSS高效开发工具解决方式，其本身只包含CSS解析器只能将CSS处理成一棵抽象语法树（AST），同时提供一个丰富的CSS节点树API，可以对语法树进行操作，另外它有一个高拓展性的插件系统支持我们通过引入不同插件对CSS进行处理，一个插件的输出还可以是下一个插件的输入，更值得一提的是，这些插件都是JavaScript插件，前端开发者们很容易就能根据项目需求定制自己的插件，所以可以总结几点一以下特性：