Vue引入外部css, 作用域是局部的解决方案

问题描述

了解css文件的引入方式，寻找解决css文件通过引入，只在当前的vue组件当中有效，不影响其他组件样式的解决方案

引入方式

1. js文件中引入

import 'iview/dist/styles/iview.css'

此时样式在全局生效

2. style当中引入

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

测试@import只是 动态引入，加载到了中，没有添加scope属性

3. style 当中 通过src引入

<style scoped src="../static/css/user.css">

测试结果：

style中添加相应的id，使的样式只在当前的div 中生效