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

x6yk4ghg  于 3个月前  发布在  Webpack
关注(0)|答案(4)|浏览(71)

相关平台

微信小程序

小程序基础库: 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
2ledvvac

2ledvvac1#

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

bvjxkvbb

bvjxkvbb2#

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

是因为 tailwindcss 的原因吗?

yhived7q

yhived7q3#

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

是因为 tailwindcss 的原因吗?

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

mpgws1up

mpgws1up4#

不用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, // 不改变函数名称
      },
    }]);

相关问题