手把手教你webpack3（11）PostCSS-Loader配置简述

如果可以，请给本项目加【Star】和【Fork】持续关注。

<code>postcss-loader</code> 用于处理css代码，具有下列特点：

通常由 <code>options</code> 和 <code>plugins</code> 两部分组成，<code>plugins</code> 虽然嵌套在 <code>options</code> 里，但实际上是通过其他插件生效的；

配置是可以独立的（每个配置的插件也是独立的）。详细介绍阅读【2.1】；

还有一些自定义配置，但由于篇幅所限，这里就不像之前那样详解每个配置了（主要是很多都依赖于其他东西）。

只写一些常用功能。

所谓独立配置，指的是在js文件中，引入的css文件如何被<code>postcss-loader</code>解析，取决于和他最近的那一个postcss的设置文件。

<b>注：</b>

对在css文件中，通过<code>@import</code>导入的css文件无效：

必须是通过通过<code>import</code>引入到js里面的css文件，才会被<code>postcss-loader</code>解析生效；

如果是<code>a.css</code>，通过<code>@import './b.css'</code>引入<code>b.css</code>文件，那么该配置对<code>a.css</code>生效，对<code>b.css</code>无效；

优先级：

在 <code>webpack.config.js</code> 中的<code>module.rules</code>属性里设置的优先级最高；

然后按顺序找，离css文件最近的<code>postcss.config.js</code>配置文件，遇见的第一个文件其次；

按顺序找的后面的文件优先级最低；

找不到配置会报错；

<b>注（完）</b>

先假设 <code>webpack.config.js</code> 里配置方式如下（无任何特殊配置）：

简单来说，<code>postcss-loader</code> 的配置文件名为：<code>postcss.config.js</code>。

假设文件树结构如下：

引用（<code>import</code>）结构是：

<code>app.js</code> -&gt; <code>style/style.css</code>

<code>app.js</code> -&gt; <code>style2/bar.css</code>

假如两个css文件都有一条css属性：<code>box-sizing: border-box;</code>；

然后 <code>style/postcss.config.js</code> （2#)的设置如下（兼容性配置）：

<code>style2/postcss.config.js</code> (3#)的设置如下（默认配置）：

经过<code>postcss-loader</code>的处理之后，有兼容性配置的css文件，其插入html文件后，css属性变为如下：

无兼容性配置的css文件，其插入html文件后，css属性变为如下：

说明一点，对于<code>postcss-loader</code>来说，他优先取同目录下的<code>postcss.config.js</code>的配置属性。

另外，由于2#和3#设置文件的存在，因此无论1#如何设置，都不会影响其效果。

假如css文件找不到同目录下的<code>postcss.config.js</code>文件，那么会依次往上级目录寻找，直到找到，或者抵达项目根目录为止（以上面这个目录结构为例，即<code>webpack.config.js</code>所在目录是根目录）

名称

类型

默认值

描述

config

{Object}

undefined

Set postcss.config.js config path &amp;&amp; ctx

在上面，我们写了<code>postcss-loader</code>的配置文件的使用方式，分别是：【写在<code>webpack.config.js</code>中】，【配置文件放在对应的css文件的同级目录或者上级目录】。

但是假如我们需要统一管理 <code>postcss-loader</code> 的配置文件，那么就需要通过 <code>config</code> 来处理。

示例代码如下：

表示会去 <code>webpack.config.js</code> 的同目录下去找文件夹 <code>config</code>，然后在该文件夹下找到 <code>postcss.config.js</code> 文件（文件名不能改变），从而读取配置。

假如这么写，会导致【放在对应的css文件，的同级目录或者上级目录，的<code>postcss-loader</code>的配置文件<b>失效</b>】。原因是优先级问题。

除此之外，还有一个<code>context</code>设置，略略略。

测试后，无效（开启与否文件大小不变）

除了 <code>autoprefixer</code> 用于加兼容性前缀，其他基本都有更好的，比如<code>stylelint</code>不如用<code>eslint</code>系列替代。

这个是最应该添加的插件了。

效果是对css文件添加兼容性前缀。

安装：

官方github地址：

<a href="https://github.com/postcss/autoprefixer">https://github.com/postcss/autoprefixer</a>

使用方式：

效果：

应该是兼容性最强的配置方法了，例如<code>box-sizing</code>可以添加两个前缀，有些特性可以添加三个前缀，如下：

转换前

转换后：

其他特性：

不仅可以添加前缀，也可以删除旧前缀（过时前缀）等。详细查看官方文档。

非特殊要求，直接使用上面这个配置就行了（如果不需要最多的前缀，可以把上面的改为

<a href="https://github.com/ecmadao/Coding-Guide/blob/master/Notes/CSS/PostCSS%E9%85%8D%E7%BD%AE%E6%8C%87%E5%8C%97.md">PostCSS配置指北</a>