mini-css-extract plugin with postcss throws this.getOptions 不是函数

Question

我正在尝试为我的个人项目设置顺风 css。这是一个 React SSR 应用程序。我在 webpack 配置下遇到 postcss 设置问题。它在每个 *.css 文件（甚至是空文件）上抛出相同的错误。

好像无法解析配置文件或默认选项？尝试了不同的配置，但没有效果。最初，我认为它可能与我的 css 文件有关，但如果我删除 postcss 插件

它们都有效并且可以编译

webpack 配置

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');

const paths = require('./paths');

module.exports = {
  entry: {
    index: path.resolve(paths.projectSrc, 'index.js'),
  },
  resolve: {
    alias: {
      '@src': paths.projectSrc,
    },
  },
module: {
  rules: [
  {
    test: /.js$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
    },
  },
  {
    test: /\.html$/,
    use: [
      {
        loader: 'html-loader',
        options: { minimize: true },
      },
    ],
    exclude: /node_modules/,
  },
  {
    exclude: /node_modules/,
    test: /\.css$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: path.resolve(__dirname, './client-build/css/'),
        },
      },
      {
        loader: 'css-loader',
        options: { importLoaders: 1 },
      },
      {
        loader: 'postcss-loader',
        options: {
          postcssOptions: {
            config: path.resolve(__dirname, 'postcss.config.js'),
          },
        },
      },
    ],
  },
  {
    test: /\.(woff2?|ttf|otf|eot|png|jpg|svg|gif)$/,
    exclude: /node_modules/,
    loader: 'file-loader',
    options: {
      name: './assets/[name].[ext]',
    },
  },
],
},
  plugins: [
    new ESLintPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(paths.public, 'index.html'),
      filename: 'index.html',
    }),
    new MiniCssExtractPlugin({
      filename: '[name].bundle.css',
      chunkFilename: '[id].css',
    }),
    new CopyWebpackPlugin({
      patterns: [{ from: path.resolve(paths.public, 'assets'), to: 'assets' }],
    }),
  ],
  devtool: 'inline-source-map',
};

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

控制台输出

Answer 1

这是由于 postcss-loader 的 v5.0.0 中的重大更改引起的，其中支持版本 [=52= webpack 的 ]4 已删除。

README 其中指出：

变更日志

此项目的所有显着更改都将记录在此文件中。有关提交指南，请参阅 standard-version。

5.0.0 (2021-02-02)

⚠ 重大变化

支持的最低 webpack 版本是 5

如何修复

您需要将 postcss-loader 降级到 v4.2.

Angular 项目的旁注

如果这对其他读者有帮助：您可能不仅仅在 React 项目中看到它。我在将 Angular 8 项目升级到 Angular 11.

后发现了这个问题

虽然我无法帮助 React 项目，但这个 Angular 提示无论如何也可能有用。如果您在 Angular 项目上并且已经尝试通过升级到 v5 来解决此问题 webpack 然后运行使用 webpack 的 v4 解决与库的依赖关系问题 - 您需要按照这些步骤操作。

降级 postcss-loader 至 v4.2 如上所述。
从 package.json.

webpack

v5

删除package.lock.json.
删除 node_modules 目录。
运行 npm install.
运行 ng serve 或 ng build.
告诉老板你修好了。

在此之后，您应该可以使用 tailwindcss 和 Angular。

mini-css-extract plugin with postcss throws this.getOptions 不是函数

mini-css-extract plugin with postcss throws this.getOptions is not a function

reactjs

webpack

tailwind-css

postcss