DEV Community
·
引用其他 Vue 文件的样式
💡
原文英文，约500词，阅读约需2分钟。
📝
内容提要
本文讨论了扩展组件时作用域样式未应用的问题，通过在vite.config.js中定义插件，可以在构建前修改单文件组件(SFC)，成功引入扩展组件样式。
🎯
关键要点
- 本文讨论了扩展组件时作用域样式未应用的问题。
- 通过在vite.config.js中定义插件，可以在构建前修改单文件组件(SFC)。
- 成功引入扩展组件样式的方法是通过在插件中编写load函数。
- 在load函数中，读取.vue文件的内容并解析其中的样式标签。
- 使用JSDOM处理DOM，提取样式并将其添加到原始字符串中。
- 在ExtendedComp.vue中，可以通过<style src="./Comp.vue"></style>引用样式。
- 即使不扩展组件，也可以引用样式。
❓
延伸问答
如何在Vue中解决扩展组件时作用域样式未应用的问题？
可以通过在vite.config.js中定义插件，修改单文件组件(SFC)来解决这个问题。
在vite.config.js中如何定义插件以引入扩展组件样式？
在vite.config.js中定义一个插件，并在load函数中读取.vue文件内容，解析样式标签。
如何在ExtendedComp.vue中引用其他Vue文件的样式？
可以通过在ExtendedComp.vue中使用<style src="./Comp.vue"></style>来引用样式。
使用JSDOM处理DOM有什么作用？
使用JSDOM可以提取样式并将其添加到原始字符串中，从而解决样式未应用的问题。
在构建前如何修改单文件组件(SFC)？
可以通过在vite.config.js中定义插件的load函数来在构建前修改单文件组件(SFC)。
是否可以在不扩展组件的情况下引用样式？
是的，即使不扩展组件，也可以引用样式。
➡️
