Vue imports external css files

I have been using the wrong method all the time, as follows:

<style scoped>
@import url('../assets/css/edit.css');
/*@import 'details.scss';*/
</style>

The scope of this writing is global, not local.
Reason: I saw in other articles: Do not use @import to import css in the production environment, because if the requested css contains @import to import css, a request will be initiated to import the @import css, and multiple requests are unnecessary. H.

@import does not introduce code into <style></style>, but initiates a new request to obtain style resources, and does not add scoped

So the correct way is to use src to solve the scope is a global problem.

<style scoped src='../assets/css/edit.css'>
</style>

或者

<style scoped src='../assets/css/edit.css'/>