vue中引入样式方法

vue中引入样式的方法
1.引入css文件
1.1在style标签中引入(可设置成局部)
1.2全局引入
1.3局部引入
2.组件内部引入样式的污染
3.同一个组件内新写样式
4.@import和import的区别
1.引入css文件
1.1在style标签中引入(可设置成局部)
在标签上添加 scoped 属性后则变成了局部引用

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

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

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

import '@/style/reset.css'
1
1.3局部引入
<style scoped>
  @import '@/assets/iconfont/iconfont.css';这个分号一定要写，要不会报错
</style>
1
2
3
2.组件内部引入样式的污染
@import引入样式文件，就算加scoped，其它没有引入的模块还是可以访问到你的样式，如果某个组件的类名一致，则就会被污染到。

解决办法：

修改引入样式：

<style src="@/style/reset.css"  scoped></style>
1
3.同一个组件内新写样式
要是在写新的样式，要重新写一个新的style标签

<style src="@/style/reset.css"  scoped></style>
<style scoped>
  //新的css样式
</style>
1
2
3
4
4.@import和import的区别
1.@import

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

2.import

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

原文链接：https://blog.csdn.net/qq_41743601/article/details/119772279