【BUG】 微信小程序插件开发，comp 引入路径错误以及公共样式未引入

[hangaoke1]

相关平台

微信小程序

复现仓库

https://github.com/hangaoke1/taro-plugin-test.git
小程序基础库: 4.0.4
使用框架: React

复现步骤

拉取项目

npm i
npm run dev

期望结果

comp 引入路径正确
样式正常加载

实际结果

comp引入路径错误
样式未正常加载

环境信息

👽 Taro v4.0.4


  Taro CLI 4.0.4 environment info:
    System:
      OS: macOS 13.3.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
      Yarn: 1.22.5 - ~/.yarn/bin/yarn
      npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/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/taro-loader: 4.0.4 => 4.0.4 
      @tarojs/webpack5-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 
      react: ^18.0.0 => 18.3.1 

[hangaoke1]

comp 组件引用层级错误

list、chat 引用了同一份样式文件，输出 app.wxss 但是小程序插件未引入

[hangaoke1]

虽然 app.wxss 中引入了 common.wxss，但是小程序插件不同于小程序应用，是不会加载 app.wxss 样式文件的，所以导致插件编译后公共样式丢失

可以临时写一个 webpack 插件判断如果是插件编译模式则使用插件，并在每个页面及导出组件的样式文件中导入缺失的 common.wxss

const { Compilation } = require('webpack');
const Regexp = /(?<=(components\/public|pages))\/.+\.wxss/g;

class WxssImportPlugin {
  constructor(options) {
    this.options = options;
  }
  apply(compiler) {
    compiler.hooks.thisCompilation.tap('WxssImportPlugin', (compilation) => {
      compilation.hooks.processAssets.tapAsync(
        {
          name: 'WxssImportPlugin',
          stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
        },
        (assets, callback) => {
          for (const [name, source] of Object.entries(assets)) {
            if (Regexp.test(name)) {
              const times = name.split('/').length - 1;
              const firstLine = `@import '${`${Array(times).fill('../').join('')}common.wxss`}';\r\n`;
              assets[name] = new compiler.webpack.sources.ConcatSource(firstLine, source);
            }
          }
          callback();
        },
      );
    });
  }
}

module.exports = WxssImportPlugin;

import WxssImportPlugin from './WxssImportPlugin';


webpackChain(chain, webpack) {
      const isBuildPlugin = chain.output.get('path').includes('miniprogram/plugin');

      // 临时解决方案，解决 Taro 插件未引入公共样式问题（插件不会自动加载 app.wxss）
      if (isBuildPlugin) {
        chain.plugin('WxssImportPlugin').use(WxssImportPlugin, []);
      }
    },