How do I import scoped CSS in Vue 3?

Question

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   
...

Gnoll Team · Accepted Answer · 2020-08-27 16:49:32Z

9

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   
...

answered Aug 27, 2020 at 16:49

Gnoll Team

1611 gold badge1 silver badge6 bronze badges

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

Comments

Mr Bien · Accepted Answer · 2023-02-01 09:49:18Z

7

you try for css

<style lang="css" scoped src="../../../public/css/company/style.css"></style>

answered Feb 1, 2023 at 9:49

Mr Bien

711 silver badge1 bronze badge

1 Comment

n0099 May 23 at 14:05

vuejs.org/api/sfc-spec.html#src-imports

Jurijs Kovzels · Accepted Answer · 2024-02-16 20:34:26Z

3

@Gnoll Team's answer did not work for me, at least not with with pure css. What worked was dedicated style element with src, and on top of that you can add second style element with inline css.

<style lang="css" scoped src="./style.css"></style>
<style lang="css" scoped>
# more css here
</style>

But there is a caveat with scoped css. You can not use CSS custom properties (--*) defined in :root selector. Workaround is to use :first-child instead and make sure that <template> contains single root element.

edited Feb 16, 2024 at 20:34

answered May 6, 2023 at 0:07

Jurijs Kovzels

6,5163 gold badges30 silver badges42 bronze badges

Comments

Jonas Souza · Accepted Answer · 2023-08-16 00:15:24Z

1

So that other styles are not ignored, you can use @import to import style rules from other stylesheets. The ~@/ characters are used to identify the src root of the vue, in this case Vue 3, for other versions of Vue one should check the correct import way.

<style lang="sass" scoped>
@import '~@/assets/sass/styles.sass';

/* more sass here */
</style>

Note the caveat with scoped css explained by @jurijs-kovzels.

answered Aug 16, 2023 at 0:15

Jonas Souza

111 bronze badge

Comments

Bool · Accepted Answer · 2024-10-21 22:52:12Z

0

For what it's worth I didn't find what I was looking for in this post. Here's the skinny, I'm using Vitepress and I want to override some styles that are obviously scoped but I'm using a standalone override css file.

I can't seem to attach any sort of "scoped" status to the standalone css file. Also the way that it's included / imported is through a JS file. Cause I thought maybe I could declare scoped in my import.

I'll update this if I figure out how to work around this.

answered Oct 21, 2024 at 22:52

Bool

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How do I import scoped CSS in Vue 3?

5 Answers 5

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related