Zong
借助 Webpack 实现样式手动插入

背景是需要将 import 'example.css' 的样式插入到 iframe 下。

网上有很多方案,但是都不是我想要的解决方法。

比如获得到样式的内容,然后插入到 iframe 下,但是我希望实现的是类似于 import 的实现方法。

那么查阅了相关资料发现,style-loader 有一个配置项 injectType: 'lazyStyleTag' ,支持后动插入 <style> 标签。

import styles from 'example.css'

styles.use()

是在调用 use 方法后对应的 <style> 标签才会插入到 document.head 中。由于我们的需求是插入到 iframe 下的 head 中去,所以我们还需要进行少许配置。

我们需要配置 insert 函数,让 use 方法的调用可以插入到指定的位置。

但是你会发现 use 方法不接受参数,所以我们需要使用一些手段来实现,当调用 use 方法时,能够顺利插入到指定位置。

我们需要看到 node_modules/style-loader/dist/index.js 的源码位置,可以看到 use 方法调用时会调用来自 ./runtime/injectStylesIntoStyleTag.js 的默认导出函数。并且传入上下文和 options

当然这不是重点,这是入口,持续执行后会看到进入到 insertStyleElement 函数。如果配置 insert 为函数,相当于调用 use 方法时逻辑自行处理。

回到 index.js 的文件位置,这里很关键的内容出现了,我们可以在 insert 函数定义时通过外部的环境来定义需要将样式插入的具体位置。

options({
  injectType: 'lazyStyleTag',
  insert: function (style: HTMLStyleElement) {
    var doc = globalThis.__example__ || document
    if (doc.head) {
      doc.head.appendChild(style)
    }
  }
})

当然,你仔细观察源码可以发现,其他还可以在 insert 函数中获取到 exported 这个变量,至于是为什么,相信你去看下 index.js 便会明白。

我们可以按照我们的需求,声明一下 d.ts

declare module '*.css?lazy' {
  interface LazyCSS {
    locals: Record<string, any>
    use: () => void
    unuse: () => void
    __appendTo__?: Document
  }
  const lazycss: LazyCSS
  export default lazycss
}

我们就可以这样使用:

import styles from 'example.css?lazy'

styles.__appendTo__ = iframeDoc
styles.use()

当然, insert 函数也需要做稍许调整:

options({
  injectType: 'lazyStyleTag',
  insert: function (style: HTMLStyleElement) {
    var doc = exported.__appendTo__ || document
    if (doc.head) {
      doc.head.appendChild(style)
    }
  }
})

这里肯定会奇怪,为何后面加了一个参数 ?lazy ,是为了区分普通 import 样式和手动插入的参数。

结合完整的在 webpack-chain 中的配置如下:

const insert = function (style: HTMLStyleElement) {
  var doc = exported.__appendTo__ || document
  if (doc.head) {
    doc.head.appendChild(style)
  }

  // 可以加入任何你想加入的逻辑
}

config.module.rule('css')
  .oneOf('lazy-css')
  .before('normal')
  .resourceQuery(/lazy/)
  .test(/\.css$/)
  .use('style-loader')
  .loader('style-loader')
  .options({ injectType: 'lazyStyleTag', insert })
  .end()
  .use('css-loader')
  .loader('css-loader')
  .end()
  .use('postcss-loader')
  .loader('postcss-loader')

// 同样的,你也可以配置 module.css 也使用手动插入的形式
// 记住需要在原有的 loader 校验前加入

到这里,我们其实已经实现了我们的需求。也算是大功告成!

不过这里针对 CSS Module 这种形式记得注意 hash 值是否能够保持一致,若你的 npm 包需要提供这类能力,可以将样式在构建产出时将 hash 值编译成一个非 CSS Module 的样式文件,然后进行引入使用即可。

有关 style-loader 的源码可以点击查看

同理,在别的工程化工具下,也可以借助这个思路实现手动插入样式的需求~