CODEWITHSUNDEEP
cssvuejs2
omega
omega

Reputation: 43843

How to do scoped external css in vue.js?

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

Upvotes: 9

Views: 6314

Answers (2)

Atchutha rama reddy Karri
Atchutha rama reddy Karri

Reputation: 1569

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>

Upvotes: 1

Mark
Mark

Reputation: 92440

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

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

Upvotes: 14

Related Questions