vue.jsvue-cli-3

How to import css files in vue 3 child components?


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.


Solution

  • 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: