如何解决Webpack 使用打包样式作为字符串
我正在使用此模块 https://www.npmjs.com/package/vue-cli-plugin-browser-extension 在 Vue 3 中编写浏览器扩展程序(作为 Web 应用程序的伴侣),虽然一切正常,但我需要将 Vue 实例附加到 Shadow DOM(因为代码被注入到各种网页中,我需要隔离样式)。
这是我最初的问题 Delayed registration of event listeners in a Vue 3 instance inside an iframe 的后续(尝试使用 iframe 隔离样式失败),遗憾的是我没有得到答案,所以我不得不想出我自己的笨拙解决方案(如该问题的自我回答中所述)。
将所有样式放在单独的 .css 文件中,并使用 Webpack 原始加载器,将它们连接到一个字符串并将其注入到 Shadow DOM 根节点中。
问题是,嗯,这是一个糟糕的解决方案。不仅样式注入了两次(一次注入了文档的头部,一次注入了我创建的影子根),而且还因为我无法以这种方式使用一体式组件并与(正确编写)共享它们网络应用。
我的问题是,由于 webpack 能够从多合一组件中提取样式并创建一个 .css 文件,该文件默认附加到文档的头部,是否也有可能以某种方式获取在构建时以字符串形式保留此文件并将其附加到自定义 Shadow DOM 根节点?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。