Webpack Postcss loader警告“变量未定义，在没有回退的情况下”用于包含两个CSS文件的网页条目

在webpack条目文件index.js中，我刚刚导入了两个CSS文件a.CSS和b.CSS，但它不起作用，因为b.CSS没有看到a.CSS中的变量：

b.CSS中的警告。。。变量--textColor未定义，使用时没有回退

。我应该如何更改webpack.config.js以使其正常工作？我知道我可以直接在a.css中导入b.css，但这是一个简单的例子，我的项目要复杂得多，有几十个css文件，我不想更改它的内容

// 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',
                        },
                        {
                            loader : 'postcss-loader',
                            options : {
                                plugins: [
                                    require('postcss-css-variables')(),
                                ],
                            },
                        },
                    ],
                },
            ],
        },
    };
}

---

首先，@import将很快被弃用。使用@Use和@forward，因此值得一读

postsss css变量 如果您需要对传统浏览器（ie11）的支持，则只需要POSTSSS css变量。否则，只需按原样使用css变量即可。如果您需要传统支持，我真的建议您构建dual（适用于modern和带有transpiled css变量的dual）

这里有一个@import的遗留配置

    {
      // snippet from
      // https://github.com/unic/darvin-webpack-boilerplate/blob/master/webpack/settings/style-legacy/index.js#L29
      loader: 'postcss-loader',
      options: {
        plugins: () => [
          autoprefixer({
            grid: 'autoplace',
            flexbox: 'no-2009'
          }),
          require('postcss-css-variables')({ preserve : false, preserveAtRulesOrder: true })
        ],
        sourceMap: false,
      },
    },

---

Im不使用CSS@import，而是使用javascript导入-请参阅index.js您可以使用相同的配置

// a.css
:root {
  --textColor: red
}

// b.css
body {
  color: var(--textColor);
}

    {
      // snippet from
      // https://github.com/unic/darvin-webpack-boilerplate/blob/master/webpack/settings/style-legacy/index.js#L29
      loader: 'postcss-loader',
      options: {
        plugins: () => [
          autoprefixer({
            grid: 'autoplace',
            flexbox: 'no-2009'
          }),
          require('postcss-css-variables')({ preserve : false, preserveAtRulesOrder: true })
        ],
        sourceMap: false,
      },
    },