postcss-loader

什么是属性前缀

我们先来看一下代码：

1 2	-webkit-transform : rotate ( 45deg ) ;          transform : rotate ( 45deg ) ;

为了浏览器的兼容性，有时候我们必须加入-webkit,-ms,-o,-moz这些前缀。目的就是让我们写的页面在每个浏览器中都可以顺利运行。

PostCSS

PostCSS是一个CSS的处理平台，它可以帮助你的CSS实现更多的功能，但是今天我们就通过其中的一个加前缀的功能，初步了解一下PostCSS。

安装

需要安装两个包postcss-loader 和autoprefixer（自动添加前缀的插件）

1	npm install -- save - dev postcss - loader autoprefixer

postcss.config.js

postCSS推荐在项目根目录（和webpack.config.js同级），建立一个postcss.config.js文件。

postcss.config.js

1 2 3 4 5

module . exports = {      plugins : [          require ( 'autoprefixer' )      ] }

这就是对postCSS一个简单的配置，引入了autoprefixer插件。让postCSS拥有添加前缀的能力，它会根据 can i use 来增加相应的css3属性前缀。

编写loader

对postcss.config.js配置完成后，我们还需要编写我们的loader配置。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

{        test : / \ . css $ / ,        use : [              {                loader : "style-loader"              } , {                loader : "css-loader" ,                options : {                  modules : true                }              } , {                loader : "postcss-loader"              }        ] }

提取CSS

配置提取CSS的loader配置.

1 2 3 4 5 6 7 8 9 10 11

{      test : / \ . css $ / ,      use : extractTextPlugin . extract ( {          fallback : 'style-loader' ,          use : [              { loader : 'css-loader' , options : { importLoaders : 1 } } ,              'postcss-loader'          ]      } )      }

总结:postcss还有很多功能，我希望小伙伴学会自学。这里给出postcss-loader的github地址：https://github.com/postcss/postcss-loader