导入css样式文件

如何书写css样式

<style scoped >
//书写css样式
</style>

scoped 是干啥的？

scoped

加入该属性会生成一个css作用域，只会该vue文件才会生效，其它vue文件无法应用该样式

如何导入css样式

第一种

<style scoped src="css文件存放地址">
  // 即导入css样式又保留局部作用域
</style>

第二种

<style >
@import url('css文件存放地址');
</style>

两种导入方式的区别

第一种是通过vue-loader 进行解析的，他会给css文件追加hash ，打上标记

第二种方式通过 css-loader进行解析的，他会将css样式插入到页面的style元素，并不会产生标记

注意 scoped 中不能使用 @import url('css文件存放地址'); 导入样式，如果即想导入样式又想保留局部作用域就使用第一种导入方式