The Vue style inside uses @import to introduce external CSS, the scope is the global solution

Using @import to introduce external CSS, the scope is global

<Template></template>< script> export default {name:  "user"};</script><!--Add" scoped "attribute to limit CSS to this component only--><style  Scoped>@import  ". /static/css/user.css "; .user-content{background-color:  #3982e5;} </STYLE>         

Add "scoped" attribute to limit CSS

to this component only

This sentence everyone should be seen more, I also use scoped, but using @import to introduce external style sheet scope is still global, after seeing the rules of @import, make a preliminary guess, is it @import introduced external style sheet missed scoped style?

Think back to the front-end performance optimization article has been mentioned, in the production environment do not use @import to introduce CSS, because in the request to the CSS containing @import introduced CSS, will initiate the request to @import CSS introduced, many requests to waste unnecessary resources.

@import is not introducing code into <style></style>, but launching new requests to get style resources without adding scoped

<style scoped>@import "../static/css/user.css";</style>

All we need to do is change the @import to <style src= "" ></style> introduce an external style, you can solve the problem of the style is global

<style scoped src="../static/css/user.css"><style scoped>.user-content{ background-color: #3982e5;}</style>

The overall code is as follows:

<Template></Template><Script> Export default { name: "User"};  </script><!--Add "scoped" attribute to limit CSS to this component--<style SCO PED src=". /static/css/user.css "><style scoped>. user-content{ background-color: # 3982e5;} </style>                 

Reference links

Vue style uses @import to introduce external CSS, the scope is a global solution