带有 postcss 的 mini-css-extract 插件抛出 this.getOptions 不是一个函数 ⚠ 重大变化

问题描述

我正在尝试为我的个人项目设置一个顺风 css。这是一个反应 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/,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)$/,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: {},};

控制台输出

解决方法

这是由postcss-loader的v5.0.0中的重大更改引起的，该更改支持版本4webpack 的 /em> 已删除。

---

README 声明：

更新日志

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

5.0.0 (2021-02-02)

⚠ 重大变化

• 支持的最低 webpack 版本为 5

---

如何解决

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

Angular 项目的旁注

如果这对其他读者有所帮助：您可能不会只在 React 项目中看到这一点。我在将 Angular 8 项目升级到 Angular 11 后发现了这个问题。

虽然我对 React 项目无能为力，但无论如何，这个 Angular 提示也可能有用。 如果您使用的是 Angular 项目，并且您已经尝试通过升级到 webpack 的 v5 来解决此问题，然后使用v4 of webpack - 您需要按照以下步骤操作。

1. 如上所述将 postcss-loader 降级到 v4.2。
2. 从 webpack 中删除 package.json v5。
3. 删除package.lock.json。
4. 删除 node_modules 目录。
5. 运行 npm install。
6. 运行 ng serve 或 ng build。
7. 告诉老板你修好了。

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