使用postcss和mini-css-extract插件时，出现了this.getOptions不是函数的错误。

Question

我正在为我的个人项目设置Tailwind 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: {},
  },
};

控制台输出

- NotAWizzard

Answer 1

这是由于 postcss-loader 的版本 v5.0.0 引入了重大变更，不再支持 4 版本的 webpack。

---

README 中有以下说明：

更新日志

此项目的所有重要更改都将记录在此文件中。请参阅标准版本以了解提交指南。

5.0.0（2021-02-02）

⚠ 重大变更

• 最小支持的 webpack 版本是 5

---

如何修复

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

关于 Angular 项目的注意事项

如果有其他读者需要帮助：这个问题不仅发生在 React 项目中。我在将 Angular 8 项目升级到 Angular 11 后也遇到了这个问题。

虽然我不能帮助 React 项目，但这个关于 Angular 的提示也可能会有用。如果你正在进行一个Angular项目，并且已经尝试通过升级到v5的webpack来解决此问题，但是遇到了使用v4的webpack库的依赖问题 - 你将需要按照以下步骤进行操作：

1. 将postcss-loader降级到v4.2，如上所述。
2. 从package.json中删除webpackv5。
3. 删除package.lock.json。
4. 删除node_modules目录。
5. 运行npm install。
6. 运行ng serve或ng build。
7. 告诉老板你已经解决了问题。

完成后，您应该可以在tailwindcss和Angular项目中继续工作。

- Johnathan

---

我之前使用的是 less-loader 的 8 版本，我的解决方案类似：我不得不降级到版本 7 才能与 Webpack 4 兼容。 - M -