(十二)自动处理CSS3前缀

本节知识点

• 自动添加css3前缀,以期待浏览器的识别

PostCSS

• PostCSS是一个CSS的处理平台，他有很多功能，本节主要是利用加前缀的功能

(一)安装

• 主要需要两个包 postcss-loader 和autoprefixer(自动添加前缀的插件)

npm install postcss-loader autoprefixer --save-dev

• postcss.config.js 在webpack.config.js同级目录下建一个文件

postCSS推荐在项目根目录(和webpack.config.js同级),建立一个postcss.config.js文件

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

• 编写loader

要是提取css就这样写

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

要是不提取CSS就这样写

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