vue中引入样式的方法

1.引入css文件

1.1在style标签中引入(可设置成局部)

在标签上添加 scoped 属性后则变成了局部引用

注意：下图的icon.css文件仍然是全局引用，需要将文件后缀改为scss或者less才能变成局部的

在更换过程中建议改成scss类型，因为它支持css的所有语法。

1.2全局引入

引入外部文件只需在main.js文件中，其中@代表src

import '@/style/reset.css'

1.3局部引入

<style scoped>
  @import '@/assets/iconfont/iconfont.css';这个分号一定要写，要不会报错
</style>

2.组件内部引入样式的污染

@import引入样式文件，就算加scoped，其它没有引入的模块还是可以访问到你的样式，如果某个组件的类名一致，则就会被污染到。

解决办法：

修改引入样式：

<style src="@/style/reset.css"  scoped></style>

3.同一个组件内新写样式

要是在写新的样式，要重新写一个新的style标签

<style src="@/style/reset.css"  scoped></style>
<style scoped>
  //新的css样式
</style>

4.@import和import的区别

1.@import

style中的@import是stylus的语法，是在css中引用css文件

2.import

script中的import是js的语法, 是在js中去引用css文件