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>