起因
最近有个业务要开发多个小程序，我们选择了用微信小程序插件的形式复用，react技术栈就选择了taro。不过开始就遇到了当头一棒，在打包时发现，2个页面引用同一个组件时，样式会丢失，天哪这还咋开发。
上github上搜了一下果然有人遇到了相同的问题
css 分包
https://github.com/NervJS/taro/issues/8168
image.png
感觉2个page引用同一个组件，应该是触发了taro打包的分包策略，css被打到common.wxss里了
然后taro 自己在小程序打包时，用app组件的wxss引用了common.wxss
可是。。plugin没有app组件呀。。。
要是能让plugin/page中的wxss引用common.wxss就好了
像这样
说干就干，只需要在每个wxss的第一行添加对common.wxss的引用就好了。
写个webpack plugin，我们在emit时，修改一下asset的source，把首行给他添加进去
const { ConcatSource } = require('webpack-sources')
const Regexp = /(?<=plugin\/(components|pages))\/.+\.wxss/g
class WxssImportPlugin {
apply(compiler) {
console.log('轮到我了》')
compiler.hooks.emit.tapAsync(
'WxssImportPlugin',
(compilation, callback) => {
// Do something async...
// 寻找 plugin/page 文件下 的wxss文件
for (let [name, assets] of Object.entries(compilation.assets)) {
if (Regexp.test(name)) {
console.log('是我了', name, assets.source())
// 找路径下有几个/
const times = name.split('/').length - 2
// 创建首行引用语句 @import '../../common.wxss'
const firstLine = `@import '${Array(times).fill('../').join('') + 'common.wxss'}'`
compilation.assets[name] = new ConcatSource(firstLine + assets.source())
}
}
callback()
}
);
}
}
module.exports = WxssImportPlugin
把新写的plugin添加到webpack配置里
# config/index.js
mini: {
...
webpackChain(chain, webpack) {
chain.plugin('WxssImportPlugin').use(WxssImportPlugin)
}
}
