如何在Vue 3子组件中导入CSS文件？

Question

我正在使用 Vue 3，我需要知道如何为不同的子组件导入不同的样式表。

例如，我有三个子组件，假设它们是 A 和 B，我想在 A 中导入样式表 X，在 B 中导入样式表 Z。

- Hassaan Aslam

Answer 1

在Vue组件中导入CSS

如果您已经设置并使用Webpack，您应该能够直接从组件文件的<style>标签内导入CSS。

// In Component A
<style scoped>
@import "./X.css"
</style>

// In Component B
<style scoped>
@import "./Y.css"
</style>

更多信息请参见:

• https://cli.vuejs.org/guide/css.html
• https://github.com/vuejs/vue-loader

- Phil Poore

---

非常感谢。我还想补充一下，可以像这样导入 // 在组件 A 中<script scoped> import '@/assets/user/css/userapp.css' </script> - Hassaan Aslam

啊，是的，我道歉，你提到你有vue-cli，这会为你设置webpack别名“@” ：P - Phil Poore