vue.jsvuejs3

How do I import scoped CSS in Vue 3?


Does anyone know how to import a scoped CSS file in Vue 3?

I tried including the code in the script tag (seen below) but it just includes the CSS globally. Then I tried adding it to the src attribute for the style tag, which works, but it ignores the styles within the style tag (also seen below).

Script Tag Include

<script>
import '@/assets/sass/styles.sass'
export default {   
...

Style Tag Include

<style lang="sass" src="@/assets/sass/styles.sass" scoped>
/* wrapper style ignored if I include src */
#wrapper   
...

Solution

  • Ok, was able to figure it out right after posting the question. For anyone else having this issue, you can simply call import within your style tag and it will maintain scoped status. Example below ...

    <style lang="sass" scoped>
    import '@/assets/sass/styles.sass'
    /* wrapper is now recognized */
    #wrapper   
    ...