当前位置: > > > Vue.js - 引入static文件夹下的css文件(全局、scoped)

Vue.js - 引入static文件夹下的css文件(全局、scoped)

我们知道 Vue 项目中静态资源文件(css、图片等)可以放在 src/assets 或者 static 文件夹下:

对于 src/assets 文件夹下的 css 文件,我们可以使用如下方式引入(使用 @import 将其作为全局样式引入):
<style>
    @import "./assets/global.css";
</style>

static 文件夹下的 css 文件引入方式则有些不同,下面通过样例进行演示。

1,作为全局样式引入

如果想要将 static 下的 css 作为全局样式引入,同样使用 @import 语句实现:
<style>
    @import "../static/global.css";
</style>

2,作为局部样式引入(scoped) 

如果想让引入的样式自动加 scoped,可以改成使用 <style src=""></style> 引入外部样式:
<style scoped src="../static/global.css">
评论0