postcss安装和使用（详细）

postcss简介

PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用JavaScript代码来处理CSS。利用PostCSS可以实现一些工程化的操作，如：自动添加浏览器前缀，代码合并，代码压缩等。
官方网址：PostCSS - 是一个用 JavaScript 工具和插件来转换 CSS 代码的工具 | PostCSS 中文网https://www.postcss.com.cn/：

目录

1,安装postcss：

2,下载autoprefixer插件，并创建postcss.config.js文件并写入配置代码

方法一：将postcss.config.js中的browsers值设置为[“>0%”]

方法二：在package.json文件中配置，而package.json文件中只需要挂载一下插件名

postcss.config.js文件代码：

package.json中需要添加的代码

方法三：  创建.browserslistrc文件并写入代码

   第一步，先创建一个txt文件，然后另存为所有文件类型的  .browserslistrc文件，文件名就叫.lbrowserslistrc  不要做任何更改

第二步，在创建好的.browserslistrc文件中输入以下代码 保存

3,创建package.json文件。并保存相关依赖

第一步，创建package.json文件

第二步，下载postcss.config.js中需要的模块并自动记录在依赖文件package.json中，

4,使用postcss进行转化

1）转化：postcss 目标文件 –o目录及新文件名

配合postcss使用的插件

一、postcss-import插件 整合其他css代码

2、cssnano插件 用来压缩代码，提高运行速度

postcss常用插件

1.postcss-cssnext 在css中用新的样式、新语法时，需要用到postcss-cssnext插件来兼容

2, stylelint插件 检测规范内容

3 postcss-sprites插件  把多张图片整合成一张大图（雪碧图）

1,安装postcss：

在此之前需要安装有node.js 

第一步 命令：cnpm install postcss-cli -g

   第二步 命令：cnpm install postcss –g

2,下载autoprefixer插件，并创建postcss.config.js文件并写入配置代码

autoprefixer插件：自动给兼容性差 的属性增加浏览器前缀，提高代码兼容性

这里的方法任意选择一种即可

方法一：将postcss.config.js中的browsers值设置为[“>0%”]

传服务器时，这里的node_modules文件夹不需要上传，存在依赖文件package.json，则使用命令：cnpm i   即可下载所需要的所有模块，自动生成node_modules文件夹

  postcss.config.js文件代码：

// 自动补齐前缀

// autoprefixer 插件

let autoprefixer = require("autoprefixer");



module.exports = {

    plugins: [

        autoprefixer({

            //兼容市面所有版本浏览器

            browsers: ["> 0% "]

        })

    ]

}

方法二：在package.json文件中配置，而package.json文件中只需要挂载一下插件名

postcss.config.js文件代码：

// 自动补齐前缀

// autoprefixer 插件

let autoprefixer = require("autoprefixer");



module.exports = {

    plugins: [

        // 方法二

        // 这里必须挂上插件

        autoprefixer

    ]

}

package.json中需要添加的代码

   "browserslist": [

        "last 5 version",

        ">1%",

        "ie>=8"

    ]

 last 5 version 表示最新五代浏览器

>1% 表示兼容市面上百分之九十九的浏览器

方法三：  创建.browserslistrc文件并写入代码

  这种方法就是把方法二中，package.json中需要添加的代码去掉””，然后放入.browserslistrc文件中

   第一步，先创建一个txt文件，然后另存为所有文件类型的  .browserslistrc文件，文件名就叫.lbrowserslistrc  不要做任何更改