vue 中遇到的坑

Vue style 里面使用 @import 引入外部 css，作用域是全局

• 问题
  在 vue 文件的 style 标签中使用 scoped 属性来限制 css 样式的作用域只在当前这个文件中，但是使用 @import 引入的样式依旧是全局的
• 原因
  通过网络以及各种途径总算弄明白了，通过 @import 引入的 css 并不像通过 style 标签的 src 引入的 css ，当浏览器解析到 @import 时并不是直接把外部的 css 引入，而是通过发送请求来获得样式资源，并没有加 scoped
• 解决方案
  1、直接把样式定义在 style 标签中，不进行引入，但是这种方式局限性比较大，对于公共的 css 样式来说不能够进行抽离共用；
  2、第二种相对来说就比较好了，只需要将 @import 改写成 <style src=""></style> 引入外部样式即可

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