vue中如何引入样式文件

Posted 不想掉头发啊!!

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中如何引入样式文件相关的知识,希望对你有一定的参考价值。

// 这是第一种引入方式,使用相对路径,缺点是文件层级过多时,会出现多个../
<style scoped lang="less">
@import "../../../seawater/style/common.less";
</style>

// 这是第二种引入方式,采用~@方式引入,即使文件层级过多也不会出现多个../, ~@表示src目录下
<style scoped lang="less">
@import "~@/seawater/style/common.less";
</style>

// scoped: 用于隔离样式,防止全局污染,会让当前样式仅作用于当前组件

以上是关于vue中如何引入样式文件的主要内容,如果未能解决你的问题,请参考以下文章

vue中如何引入样式文件

vue3单页面引入公共的css,加了scoped但无法加deep,导致样式无法穿透,如何解决?

vuev-html引入如何vue框架自身样式

vue中引入样式文件

vue项目引入公共样式less文件

vue书写样式的两种方式