css预编译器

CSS的弱编程能力，CSS通过”delector-properties”的模式为HTML文档增加样式，但CSS不支持嵌套，运算，变量，复用等。

CSS预编译器原理：

提供便捷的语法和特性供开发者编写源代码，随后经过专门的编译工具将源代码转化为CSS语法，最早的CSS预编译器是2007年起源于Ruby on Rails社区的SASS，目前不叫流行的如LESS,Stylus在一定程度上收到SASS影响

CSS预编译器提升了CSS开发效率：

1 增强编程能力

2 增强源码可复用性，让CSS开发符合DRY(Don’t repeat yourself)的原则

3 增强源码可维护性

4 更便于解决浏览器兼容性

实现

• 嵌套
• 变量
• mixin/继承
• 运算
• 模块化

嵌套是所有预编译器都支持的语法特性，mixin/继承是为了解决hack和代码复用，变量和运算增强了源码的可编程能力；模块化的支持不仅更利于代码复用，同时提高了源码的可维护性

PostCSS

PostCSS鼓励开发者使用规范的CSS原生语法编写源代码，然后配置浏览器需要兼容的浏览器版本，最后经过编译将源码转化为目标浏览器可用的CSS代码。PostCSS提供了丰富的插件用于实现不同场景的编译需求，最常用的比如autoprefix,Sprited等

PostCSS不是另一种CSS预编译器，与SASS LESS等预编译器不冲突，目前普遍方案将CSS预编译与PostCSS综合：

使用CSS预编译器弥补CSS源码的弱编程能力。比如变量，运算，继承等

使用PostCSS处理针对浏览器的需求，比如autoprefix,自动CSS Sprites

webpack结合预编译与PostCSS实现CSS构建

{
    test:/\.less$/
    use:[{
        	loader:'style-loader',
        	options:{}//style-loader options
    	 },
         {
             loader:'css-loader',
             options:{
                 importLoaders:2//css-loader options
             }
             
         },
         {
             loader:'postcss-loader',
             options:{}//postcss-loader
         }
         {
             loader:'less-loader',
             options:{}//less-loader options
             
         }
    ]
}

css-loader中的importLoaders选项的作用是：用于配置css-loader作用于@import的资源之前需要经过的其他loader的个数，@import用于CSS源码中引用其他模块的关键字，如果你的项目中确定不会涉及到模块化，可以忽略此配置项

如果需要将编译后的css文件独立导出，则需将style-loader替换为extract-text-webpack-plugin

{
    test:/\.less$/
    use:ExtractTextPlugin.extract({
        use:[{
        	loader:'style-loader',
        	options:{}//style-loader options
    	 },
         {
             loader:'css-loader',
             options:{
                 importLoaders:2//css-loader options
             }
             
         },
         {
             loader:'postcss-loader',
             options:{}//postcss-loader
         }
         {
             loader:'less-loader',
             options:{}//less-loader options
             
         }],
        publicPath:'/'
	}
        
})
    

区分css-loader和style-loader

css-loader:用于解析css源文件并获得其引用资源，比如@import引用的模块，url()引用的图片等，然后根据webpack配置编译这些资源

style-loader:负责将CSS代码通过style标签插入HTML文档中，所以如果独立导出CSS文件就不再需要style-loader，css-loader必须在style-loader之前执行