什么是postcss呢？

  • PostCSS是一个通过JavaScript 来转换样式的工具；
  • 这个工具可以帮助我们进行一些css的转换和适配，比如自动添加到浏览器前缀、css样式的重置；
  • 但是实现这些功能，我们需要借助于PostCSS对应的插件。

    为这个postcss工具所编写的对应功能的插件，然后把插件集成到postcss中，postcss本身是比较独立的，需要依赖很多个插件（可以说postcss是插件集成的地方） image.png

如何使用PostCSS呢？

主要有两个步骤：
1）找loader：查找 PostCSS 在构建工具中的扩展，比如webpack中的postcss-loader；

如果你想在webpack中使用PostCSS这个工具，你需要借助 postcss-loader

  1. 2）找插件：选择可以添加你需要的PostCSS相关的插件。

当你需要做某个功能的时候，你需要去找PostCSS中对应的插件，然后把该插件配置到某个位置，让PostCSS在使用的时候可以加载该插件

单独使用postcss（命令行使用postcss）

不在webpack的环境下使用PostCSS

1.npm install postcss -D
不能直接执行 npx postcss（因为一般都是使用postcss下的某个插件）
2.npm install postcss-cli -D

postcss-cli 可以让我们以命令行的方式使用postcss

3.我们编写一个需要添加前缀的css文件：

哪些css3属性需要加浏览器前缀，哪些不需要，我们可以借助 autoprefixer.github.io 这个网站查询。

这个网站是你把css3属性放进去，然后选择一些浏览器，它会告诉你，在这些浏览器下要不要加浏览器前缀

image.png
4.因为我们需要给属性添加前缀，所以要安装 autoprefixer 插件：
npm i autoprefixer -D

5.使用postcss工具，并且需要指定使用 autoprefixer 插件（postcss算是一个插件的集成）
npx postcss —use autoprefixer -o test.css ./src/css/style.css

npx 表明找node_modules下的postcss安装包 —use 指定使用的插件 -o 输出文件 从./src/css/test.css 输出到 style.css 中

6.转化之后的css样式如下：
image.png

真实开发中，我们必然不会直接使用命令行工具来对css进行处理，而是可以借助构建工具

webpack 中 postcss 的用法 - autoprefixer插件（一般不用该插件）

1.安装 postcss-loader，这样我们就可以在项目中使用postcss了，并且利用这个工具对我们的css进行处理。
npm i postcss-loader -D
2.我在使用postcss-loader的时候，同时也需要使用 postcss 中的autoprefixer 插件。否则不会成功添加浏览器前缀（当然也不会处理css的其他）
注意！！！因为postcss需要有对应的插件才会起效果，所以我们需要配置它的plugin
image.png
3.然后npm run build 即可成功添加浏览器前缀
image.png

webpack 中 postcss 的用法 - postcss-preset-env插件（用得较多）

事实上，在配置postcss-loader时，我们配置插件并不是十分需要autoprefixer（可以用postcss-preset-env插件，作用范围比autoprefixer更广）
我们可以使用另外一个插件：postcss-preset-env。

  • postcss-preset-env 也是一个postcss的插件；
  • 它可以帮助我们将一些现代的css特性，转成大多数浏览器认识的css， 并且会根据目标浏览器或者运行时环境添加所需的polyfill；也包括会自动帮助我们添加浏览器前缀（所以，相当于已经内置了autoprefixer）

    见 github 官网

现代的css特性
以8位数字的颜色名为例
我们这里在使用十六进制的颜色时设置了8位；但是某些浏览器可能不认识这种语法，我们最好可以转成rgba的形式；但是autoprefixer 是不会帮助我们转换的；而postcss-preset-env 是可以帮助我们完成这样的功能的
image.png
那我们需要将其转换为大多数浏览器都能识别的语言，比如rgba，这时候之前的插件 autoprefixer 就实现不了了（因为它只是加浏览器前缀），我们就需要功能更强大的 postcss-preset-env 插件了
image.png

postcss-preset-env 用法
1.首先，我们需要安装postcss-preset-env；
npm install postcss-preset-env

2.之后，我们直接修改掉之前的autoprefixer即可
image.png
注意！！！ 并不是所有的插件都可以用字符串简写的

  • 不需要传参的情况下，可以写成字符串；（如autoprefixer， postcss-preset-env等插件）
  • 需要传参的情况下，尽量用 require 导入（具体怎么传参，看插件官网）

postcss配置文件 - postcss.config.js

这个配置文件的名字是固定的，不要瞎改

image.png
修改过后
image.png
image.png

postcss 搭配 browerslist

适配满足这些条件的浏览器（把条件改得宽松些，这样满足要去的浏览器更多）
image.pngimage.png
我们发现这时候，transition 加了浏览器前缀
image.png

补充：css-loader中的属性 - importLoaders

问题：
components.js 文件中引入了 index.css 文件，在index.css文件中又通过 @import （css中的语法）引入了 test.css
image.png
image.png
image.png
我们执行 npm run build， 然后test.css 文件中的样式在postcss-loader 和postcss-preset-env插件的作用下并没有生效
image.png
图 理应生效的样式
image.png
原因：跟webpack配置文件有关 webpack.config.js

  • 首先，我们看一下test属性，匹配到的是css资源。我们的component.js 文件中引入了 index.css 文件，这时候就会匹配到这个 index.css文件；
  • 当匹配到该 css 文件的时候，这时候就会用 postcss-loader 对 index.css 文件中的代码内容进行处理；
  • 然后就会用 css-loader ，继续处理 index.css 文件中的 css 代码；当然也包括 @import “./test.css”，然后加载test.css文件，还是用 css-loader 处理 test.css 中的内容（你用css-loader当然是无法为css样式添加浏览器前缀和将颜色值转为rgba值了）并不会再用postcsss-loader处理了（处理是有顺序的，不可能逆序）

image.png
解决方案： 需要在 css-loader 中配置一个 importLoaders 的属性
importLoaders的值是数字：0、1、2、3（这些数字跟该loader之前的loader数量有关，比如下面你用css-loader处理css文件的时候，你希望再用 postcss-loader处理该文件，这时候importLoaders的值就是1了）
image.png