How to do scoped external css in vue.js?

Question

I am new to vue.js and saw this video

https://www.youtube.com/watch?v=LsoLfELhG74

Which says you can do

<style scoped>
</style>

to scope the style, but this is if I embed it into the html page. What if I link to a .css file. How could you still scope the css?

Thanks

You could try using an @import statement. Not sure if that will actually wok but it's worth a try. — Phil
– Phil, Commented Jun 19, 2017 at 1:32

Mark · Accepted Answer · 2017-06-19 05:55:06Z

15

You can add a src attribute to the style tag like this:

<style scoped src="./test.css">
</style>

answered Jun 19, 2017 at 5:55

Mark

92.6k8 gold badges116 silver badges156 bronze badges

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

5 Comments

omega Over a year ago

how does this work? How can it just update the external css and add that attribute filter to that?

Mark Over a year ago

I'm not sure if I understand what you are asking. It doesn't update the external css file. It will make a new css file based on the external one when you build the project.

Siempay Over a year ago

the link ./test.css is where exactly ? the . refers to node_modules? or where app.js is or where?

Mark Over a year ago

@brahimm this will look in the same directory as the component.

Elijah Lofgren Over a year ago

I can confirm this approach works with Sass (.scss) files as well. Thanks!

Atchutha rama reddy Karri · Accepted Answer · 2019-10-29 07:19:48Z

1

first create a scss file like styles/scss/_variables.scss.In that _variables.scss file import your required styles like $bg-color: red;

Next import that scss file in your required .vue file .

<style lang="scss">
 @import "../styles/scss/_variables.scss";
 .msg {
        background-color: $bg-color;
      }
</style>

answered Oct 29, 2019 at 7:19

Atchutha rama reddy Karri

1,56915 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to do scoped external css in vue.js?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related