PostCSS

宋乐
宋乐 2017年09月03日

编写自己的插件

Vue 中使用

vue-loader
PostCss 安装常用插件

cnpm i -D postcss-import postcss-crip precss postcss-center postcss-cssnext css-mqpacker autoprefixer postcss-color-hex-alpha cssnano

postcss.config.js

module.exports = {
  plugins: [
    require('postcss-import')(),//将多个样式表合成为一个,提高请求速度  自动发现Bower Component和Node Module中样式文件
    require('postcss-crip'),//简写

    require('precss')(),//使用变量,mix宏等等   相当于Sass处理器
    require('postcss-center')(),//垂直居中和水平居中,父容器需要设置高度和position为relative才有效
    require('postcss-cssnext')({
      features: {
        customProperties: false
      }
    }),//下一代css标准
    require('css-mqpacker')(),//@media媒体查询插件,可以将多个媒体查询合并为一个
    require('autoprefixer')(),//自动加浏览器兼容性前缀
    require('postcss-color-hex-alpha')(),//颜色转换,可以通过#22223333设置颜色和透明度
    require('cssnano')()//优化代码插件

  ]
}
评论已关闭