taro3 + reactjs + weapp-tailwindcss css 语法转义不成功

[luokelong]

使用诸如 w-[64px] 的样式类仍将生成 .w-\[64px\] 这样的 css 代码。

build 时有个警告提醒：缺少postcss插件webpackChain, 已忽略

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    "postcss-rem-to-responsive-pixel": {
      // 32 意味着 1rem = 32rpx
      rootValue: 32,
      // 默认所有属性都转化
      propList: ["*"],
      // 转化的单位,可以变成 px / rpx
      transformUnit: "rpx",
    },
  },
};

// config/index.ts

import { UnifiedWebpackPluginV5 } from "weapp-tailwindcss/webpack";
const config = {
  projectName: "taroApp",
  date: "2023-10-8",
  designWidth: 750,
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2,
  },
  sourceRoot: "src",
  outputRoot: "dist",
  plugins: [],
  defineConstants: {},
  copy: {
    patterns: [],
    options: {},
  },
  framework: "react",
  compiler: "webpack5",
  cache: {
    enable: false, // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
  },
  mini: {
    postcss: {
      pxtransform: {
        enable: true,
        config: {},
      },
      url: {
        enable: true,
        config: {
          limit: 1024, // 设定转换尺寸上限
        },
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: "module", // 转换模式，取值为 global/module
          generateScopedName: "[name]__[local]___[hash:base64:5]",
        },
      },
      webpackChain(chain, webpack) {
        chain.merge({
          plugin: {
            install: {
              plugin: UnifiedWebpackPluginV5,
              args: [
                {
                  appType: "taro",
                },
              ],
            },
          },
        });
      },
    },
  },
  h5: {
    publicPath: "/",
    staticDirectory: "static",
    postcss: {
      autoprefixer: {
        enable: true,
        config: {},
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: "module", // 转换模式，取值为 global/module
          generateScopedName: "[name]__[local]___[hash:base64:5]",
        },
      },
    },
  },
};

module.exports = function (merge) {
  if (process.env.NODE_ENV === "development") {
    return merge({}, config, require("./dev"));
  }
  return merge({}, config, require("./prod"));
};

[sonofmagic]

........，你的配置写的有问题，你 mini 下的 webpackChain 塞进了 postcss 里面了，应该是和 postcss 平级的

这就导致了你 postcss 注册失败， webpackChain 也没成功.....

https://taro-docs.jd.com/docs/config-detail#miniwebpackchain

注意是平级的：

[luokelong]

........，你的配置写的有问题，你 mini 下的 webpackChain 塞进了 postcss 里面了，应该是和 postcss 平级的

这就导致了你 postcss 注册失败， webpackChain 也没成功.....

https://taro-docs.jd.com/docs/config-detail#miniwebpackchain

注意是平级的：

感谢，是我粗心了。