Rails 6+Postcss+webpack环境报TypeError: this.getOptions is not a function如何解决

你遇到的TypeError: this.getOptions is not a function错误属于版本兼容性问题：

• postcss-loader v6.0+ 仅支持webpack v5.0+版本
• 你当前使用的@rails/webpacker 4.3.0内置webpack版本为v4系列，和postcss-loader v6.2.0完全不兼容

方案一：降级postcss-loader到兼容版本（推荐，改动最小） #

1. 卸载现有postcss-loader版本

npm uninstall postcss-loader
# 若使用yarn则执行：yarn remove postcss-loader

2. 安装兼容webpack 4的postcss-loader v4版本

npm install postcss-loader@4.2.0 --save
# 若使用yarn则执行：yarn add postcss-loader@4.2.0

3. 调整postcss.config.js插件顺序，postcss-import必须放在所有插件最前列，否则会出现样式导入错误：

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss')('./tailwind.config.js'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    }),
    require('autoprefixer')
  ]
}

4. 清理缓存重新编译

# 清理Rails临时缓存
rails tmp:cache:clear
# 重新启动webpack-dev-server或执行编译命令
bin/webpack-dev-server

方案二：升级@rails/webpacker到5.x版本（改动较大） #

如果需要使用高版本postcss-loader，可以将@rails/webpacker升级到5.x版本，该版本内置webpack 4的同时也兼容更高版本的postcss相关依赖，升级后同步调整webpacker相关配置即可。

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