Bug: Taro v4 编译器 vite 未加载 postcss.config.js

[502647092]

相关平台

微信小程序 h5

小程序基础库: 3.8.5 使用框架: Preact

复现步骤

新建项目 配置 postcss.config.js

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

期望结果

正确加载 postcss

实际结果

未加载 postcss

环境信息

$ taro info
👽 Taro v4.0.4

  Taro CLI 4.0.4 environment info:
    System:
      OS: Linux 5.10 Alpine Linux
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 20.11.1 - /usr/local/bin/node
      Yarn: 1.22.22 - /usr/local/bin/yarn
      npm: 10.2.4 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 4.0.4 => 4.0.4 
      @tarojs/components: 4.0.4 => 4.0.4 
      @tarojs/helper: 4.0.4 => 4.0.4 
      @tarojs/plugin-framework-react: 4.0.4 => 4.0.4 
      @tarojs/plugin-platform-alipay: 4.0.4 => 4.0.4 
      @tarojs/plugin-platform-h5: 4.0.4 => 4.0.4 
      @tarojs/plugin-platform-jd: 4.0.4 => 4.0.4 
      @tarojs/plugin-platform-qq: 4.0.4 => 4.0.4 
      @tarojs/plugin-platform-swan: 4.0.4 => 4.0.4 
      @tarojs/plugin-platform-tt: 4.0.4 => 4.0.4 
      @tarojs/plugin-platform-weapp: 4.0.4 => 4.0.4 
      @tarojs/react: 4.0.4 => 4.0.4 
      @tarojs/runtime: 4.0.4 => 4.0.4 
      @tarojs/shared: 4.0.4 => 4.0.4 
      @tarojs/taro: 4.0.4 => 4.0.4 
      @tarojs/vite-runner: 4.0.4 => 4.0.4 
      babel-preset-taro: 4.0.4 => 4.0.4 
      eslint-config-taro: 4.0.4 => 4.0.4 

[502647092]

通过 Taro 插件 修改 vite 编译时 可以临时解决问题

import { chalk } from '@tarojs/helper';
import { IPluginContext } from '@tarojs/service';
import { UnifiedViteWeappTailwindcssPlugin } from "weapp-tailwindcss/vite";

export function modifyViteConfig(ctx: IPluginContext, options?: any) {
    ctx.modifyViteConfig?.(({ viteConfig }) => {
        console.log(chalk.blue(`✨ weapp-tw-vite 临时解决 postcss 不加载的问题!`));
        viteConfig.plugins.push(
            UnifiedViteWeappTailwindcssPlugin(options ?? {}),
        );
        viteConfig.css = {
            postcss: {
                plugins: [
                    require("tailwindcss")(),
                    require("autoprefixer")()
                ]
            }
        }
    });
}