PostCSS

PostCSS -- 中文

  • postCSS本身是一个功能比较单一的工具。它提供了一种方式用javaScript代码来处理css。利用postcss可以实现一些工程化的操作,如:自动添加浏览器前缀,代码合并,代码压缩等。

如何使用postCSS

  • 安装node环境
  • 安装postcss脚手架
npm install postcss -g
  • -o -w命令
    -o : 编译文件到**路径下
    -w : 热编译
    postcss src/demo.css -o dist/demo.css -w
  • js依赖
    在跟目录下新建 postcss.config.js

使用postcss插件 Postcss插件库

-初始化npm依赖,生成package.json文件

    npm init
  • 安装 autoprefixer (自动添加浏览器前缀)
    npm i autoprefixer
  • 在postcss.config.js中使用autoprefixer
    const autoprefixer = require('autoprefixer')

    module.exports = {
        plugins : [
            autoprefixer({
                browsers : [' > 0%']
            })
        ]
    }
  • 安装postcss-import (多个css文件进行合并)
    npm i postcss-import
  • 在postcss.config.js中使用postcss-import
    const cssImport = require('postcss-import')
    module.exports = {
        plugins : [
            cssImport
        ]
    }
  • 安装cssnano (对css进行压缩处理)
    npm i cssnano
  • 在postcss.config.js中使用cssnano
    const cssnano = require('cssnano')
    module.exports = {
        plugins : [
            cssnano
        ]
    }

-安装postcss-cssnext (处理css高级语法)

    npm i postcss-cssnext
  • 在postcss.config.js中使用cssnano
    const cssnext = require('cssnext')
    module.exports = {
        plugins : [
            cssnext
        ]
    }

其他插件引入方式相似,在官网查看文档,可以进行其他设置。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。