vue中引入样式的方法

最新推荐文章于 2025-03-15 10:24:07 发布

菜鸟猪猪侠yy

最新推荐文章于 2025-03-15 10:24:07 发布

阅读量1.1w

点赞数 12

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_41743601/article/details/119772279

版权

19 篇文章

订阅专栏

本文详细介绍了在Vue中如何引入样式，包括全局和局部引入CSS文件，以及如何处理组件内部样式的污染问题。通过示例展示了在`style`标签中使用`scoped`属性实现局部样式，以及`@import`和`import`的区别。同时，针对样式污染给出了解决方案，确保组件样式的隔离。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

引入外部文件只需在main.js文件中，其中@代表src
import '@/style/reset.css'

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

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

解决办法：

修改引入样式：

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

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

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

1.@import

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

2.import

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