这是我参与8月更文挑战的第24天，活动详情查看：8月更文挑战
前面三篇文章讲了关于 postcss 的内容，下面我们要讲一个属性。
在深入 Webpack5 等构建工具系列二(9) - postcss 在 webpack 中的使用这篇文章中我们提到可以在 index.css 文件中引入 test.css 以便在项目中使用这个文件。因此，我们可以把 index.css 中的内容剪切到 test.css 中，然后再在 index.css 中通过 @import 来引入相关文件。如下：
即 component.js 中引入了 index.css，index.css 中又引入了 test.css，那最终 test.css 文件中的内容应该是会生效了。下面我们就在当前项目目录下运行 npm run build 进行打包，打包后浏览器中的效果如下：
可以看到，样式并没有被转化。这是为甚莫呢？关于这个问题，我们就需要讲下 postcss 到底是怎么处理代码的。我们打开 webpack 的配置文件，先来看一下要匹配的资源：
可以看到，我们要匹配 css 文件资源，那在什么时候会匹配到 css 资源呢？答案是在某个地方引入某个 css 文件资源时，就会匹配到这个 css 文件资源（这里即在 component.js 中引入 index.css 时就会匹配到这个 index.css 资源）。那匹配到 css 文件后会怎么做呢？这时就会来到 css 资源匹配规则下的 use 数组中，从下往上（从右往左）地执行 loader 了。以这里的配置为例，首先就是通过 postcss-loader 对 css 文件进行处理（这里即对 index.css 中的代码进行处理），然后就是通过 css-loader 对 css 代码（包括 @import，因为 @import 也属于 css 中的语法）进行处理（在处理 @import "./test.css"; 时，就会把 test.css 文件也加载进来了），最后再通过 style-loader 进行处理。
也就是说，index.css 中的内容会先后被 postcss-loader、css-loader、style-loader 处理，而 test.css 中的内容最终只会被 css-loader、style-loader 处理，因为 @import 这个语法本身就可以直接被 css-loader 处理了，所以在 index.css 中通过 @import 引入 test.css 后，test.css 中的代码不会再回过头被 postcss-loader 处理了。
因此，这里的问题就在于上述 test.css 文件中的内容不会被 postcss-loader 处理到。但我们希望在 index.css 中引入 test.css 时，test.css 中的内容能够回过来被 postcss-loader 处理一遍。因为真实开发中，我们希望所有 css 文件都能被 postcss-loader 处理一遍。
那我们该怎么做呢？我们可以对 use 数组中的 'css-loader' 进行修改（详见官方文档），如下所示：
{
loader: 'css-loader',
options: {
importLoaders: 1 // 数值根据前面的 loader 数量来定
}
}
上述代码块中的 importLoaders 对应的是一个数值，默认为 0，表示通过 @import 引入的资源在被 css-loader 处理之前不需要被 css-loader 之前的任何 loader 进行处理；如果数值为 1，则表示通过 @import 引入的资源在被 css-loader 处理之前会被 css-loader 之前的一个 loader 先进行处理（这里即 postcss-loader）；如果数值为 2，则表示通过 @import 引入的资源在被 css-loader 处理之前会被 css-loader 之前的两个 loader 先进行处理（这里即 less-loader 和 postcss-loader），以此类推。
根据上图所示修改配置后，到时候通过 @import 加载的 css 资源才能被之前处理过的 loader 再来处理一次，否则就实现不了预期效果。
好，修改完后我们再来运行 npm run build，来到浏览器页面查看效果：
可以看到，相关样式已经成功进行了转化。
以上，就是关于 css-loader 中 importLoaders 属性的使用和作用的讲解。
