sonofmagic / weapp-tailwindcss

weapp-tailwindcss - bring tailwindcss to weapp ! 把 tailwindcss 原子化思想带入小程序开发吧 !
https://tw.icebreaker.top
MIT License
1.25k stars 91 forks source link

[Bug]: webpack4 vue3 taro3.5.7,打包样式报错 #297

Closed k1ngbanana closed 5 months ago

k1ngbanana commented 5 months ago

weapp-tailwindcss 版本

3.2.1

框架 & 小程序平台

taro3.5.7 vue3编译到微信小程序

最小复现bug的代码仓库链接

No response

复现bug的步骤

packages/config/index.js

const { UnifiedWebpackPluginV4 } = require('weapp-tailwindcss/webpack4');

const config = {
  framework: 'vue3',
  mini: {
    plugin: {
      install: {
        plugin: UnifiedWebpackPluginV4,
        args: [
          {
            appType: 'taro',
          },
        ],
      },
    },
  },
};

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    // 假如框架已经内置了 `autoprefixer`,可以去除下一行
    autoprefixer: {},
    autoprefixer: {},
    'postcss-rem-to-responsive-pixel': {
      // 32 意味着 1rem = 32rpx
      rootValue: 32,
      // 默认所有属性都转化
      propList: ['*'],
      // 转化的单位,可以变成 px / rpx
      transformUnit: 'rpx',
    },
  },
};

tailwind.config.js

module.exports = {
  // 这里给出了一份 uni-app /taro 通用示例,具体要根据你自己项目的目录结构进行配置
  // 不在 content 包括的文件内,你编写的 class,是不会生成对应的css工具类的
  content: ['./src/**/*.{html,js,ts,jsx,tsx,vue}'],
  // 其他配置项
  // ...
  corePlugins: {
    // 小程序不需要 preflight,因为这主要是给 h5 的,如果你要同时开发小程序和 h5 端,你应该使用环境变量来控制它
    preflight: false,
  },
};

预期是什么?

预期编译了对应的tailwind css

实际发生了什么?

image image

运行环境

System:
    OS: macOS 12.6
    CPU: (10) arm64 Apple M1 Pro
    Memory: 109.25 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 20.13.1 - ~/Library/pnpm/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.6.7 - /usr/local/bin/npm
  npmPackages:
    husky: ^7.0.4 => 7.0.4 
    lerna: ^6.0.1 => 6.6.2 
    ramda: ^0.28.0 => 0.28.0

其他附加信息

No response

sonofmagic commented 5 months ago

packages/config/index.js 配置问题,应该使用 webpackChain 而不是直接 plugin.install 的配置项来注册 webpack 插件,已解决:

image