参考 Taro 官网 「通过 webpackChain 配置解决开发环境下小程序包体积过大无法进行预览上传的问题(不影响 devtools 的使用)」后，本地开发预览小程序 CSS 报错

[leejunhui]

相关平台

微信小程序

小程序基础库: 2.30.3
使用框架: React

复现步骤

项目中使用了 css module 和 less 样式文件以及 tailwind css，在没有增加下列配置前是正常的：

module.exports = {
  mini: {
    webpackChain: (chain, webpack) => {
      chain.merge({
        plugin: {
          install: {
            plugin: require('terser-webpack-plugin'),
            args: [
              {
                terserOptions: {
                  compress: true, // 默认使用terser压缩
                  // mangle: false,
                  keep_classnames: true, // 不改变class名称
                  keep_fnames: true, // 不改变函数名称
                },
              },
            ],
          },
        },
      })
    },
  },
}

增加了上述的配置后，就出现了如下的错误

[ WXSS 文件编译错误] 
ERR: wxss GetCompiledResult: ./app-origin.wxss(264:2): unexpected `\` at pos 6943(env: macOS,mp,1.06.2308310; lib: 2.30.3)

期望结果

正常开发预览小程序

实际结果

[ WXSS 文件编译错误]
ERR: wxss GetCompiledResult: ./app-origin.wxss(264:2): unexpected \ at pos 6943(env: macOS,mp,1.06.2308310; lib: 2.30.3)

环境信息

👽 Taro v3.6.15


  Taro CLI 3.6.15 environment info:
    System:
      OS: macOS 14.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
      Yarn: 1.22.19 - ~/.nvm/versions/node/v16.18.1/bin/yarn
      npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm

[HealingW]

同样的问题，注释掉 tailwindcss import 后正常额

[leejunhui]

同样的问题，注释掉 tailwindcss import 后正常额

是因为 tailwindcss 的原因吗？

[ayellowcat]

同样的问题，注释掉 tailwindcss import 后正常额

是因为 tailwindcss 的原因吗？

我也发现了，大概是terser-webpack-plugin和tailwindcss有些冲突，项目里用的各种东西太多了，相互叠加起来，编译时难免会出问题，暂时没研究怎么解决

[Logosww]

不用chain.merge，改成这样试试？

    chain.optimization.minimize(true);
    chain.optimization.minimizer('minifyMainPackage').use(TerserPlugin, [{
      parallel: true,
      terserOptions: {
        compress: true, // 默认使用terser压缩
        // mangle: false,
        keep_classnames: true, // 不改变class名称
        keep_fnames: true, // 不改变函数名称
      },
    }]);