Webpack多CSS文件引入时Postcss变量未定义警告的解决方法

这个问题我之前也碰到过！本质是因为postcss-css-variables默认只在单个CSS文件范围内识别变量，而Webpack默认会分别处理每个导入的CSS文件，导致b.css在被PostCSS处理时完全看不到a.css里定义的--textColor变量，所以才会抛出那个警告。不用修改任何CSS文件内容，只需要调整webpack.config.js的配置就能搞定：

步骤1：安装postcss-import插件 #

这个插件的作用是把所有相关的CSS文件先合并成一个整体，再交给postcss-css-variables处理，这样变量就能跨文件被识别了。在终端运行：

npm install postcss-import --save-dev

步骤2：修改Webpack配置 #

需要调整两个地方的配置：

给css-loader添加importLoaders选项 #

这个选项能确保通过@import引入的CSS文件，也会被后续的postcss-loader处理。修改后的css-loader配置如下：

{
  loader: 'css-loader',
  options: {
    importLoaders: 1, // 指定在css-loader之前需要处理@import文件的loader数量（这里是postcss-loader，所以设为1）
  }
}

在PostCSS插件数组最前面加入postcss-import #

PostCSS插件是按顺序执行的，所以要让postcss-import先把所有CSS文件合并，再交给postcss-css-variables处理变量。修改后的postcss-loader配置：

{
  loader: 'postcss-loader',
  options: {
    plugins: [
      require('postcss-import')(), // 先合并所有依赖的CSS文件
      require('postcss-css-variables')(),
    ],
  }
}

完整修改后的webpack.config.js #

var MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = (env, options) => {
 return {
 entry : 'index.js',
 mode : 'development',
 output : {
 path : '/public',
 },
 plugins : [
 new MiniCssExtractPlugin(),
 ],
 module : {
 rules : [
 {
 test : /\.css$/,
 use : [
 { loader : MiniCssExtractPlugin.loader, },
 { 
   loader : 'css-loader', 
   options: {
     importLoaders: 1,
   }
 },
 { loader : 'postcss-loader',
 options : {
 plugins: [
 require('postcss-import')(),
 require('postcss-css-variables')(),
 ],
 },
 },
 ],
 },
 ],
 },
 };
}

这样调整后，Webpack会先通过postcss-import把a.css和b.css合并成一个完整的CSS文件，之后postcss-css-variables处理时就能看到--textColor的定义，那个变量未定义的警告就会消失啦！

内容的提问来源于stack exchange，提问作者mikep