How to import css files in vue 3 child components?

Question

I'm working on Vue 3, and I need to know how I can import different style sheets for different child components.

For example, I have 3 child components, let's say A and B, and I want to import style sheet X in A and style sheet Z in B.

Phil Poore · Accepted Answer · 2019-03-17 12:19:22Z

30

Importing CSS in Vue components

If you are setup and using webpack, you should be able to import css directly from inside <style> tags in component files.

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

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

More info here:

answered Mar 17, 2019 at 12:19

Phil Poore

2,28621 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hassaan Aslam Over a year ago

Thanks a lot. I would also like to add that it can be imported like this // In Component A <script scoped> import '@/assets/user/css/userapp.css' </script>

Phil Poore Over a year ago

Ah yes, i appologise, you mentioned you have vue-cli, this sets up the webpack alias "@" for you :P

Collectives™ on Stack Overflow

How to import css files in vue 3 child components?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related