Nuxt3项目中引入全局CSS包括CSS变量的多种姿势
Nuxt3项目中引入全局CSS包括CSS变量的多种姿势
如果您觉得这篇文章有帮助的话!给个点赞和评论支持下吧,感谢~
作者:哇子
IT技术(摸鱼)交流QQ群:374984174
css文件存在两种,一种是外部css(别人写的),一种是内部css(自己写的css)
先讲外部css,比较简单
外部css
在nuxt的配置文件中配置就好了,类似这样:
1 | // https://nuxt.com/docs/api/configuration/nuxt-config |
内部css
内部css一般我们会写在public目录,或者assets目录下,两个目录对应不同的情况
区别:
public目录不会被nuxt项目编译,一般只能写css文件
assets目录会被nuxt项目编译,除了css文件,也可以写sass、scss、less这种预编译css文件
public目录
在public目录下的css,直接在配置文件中引入就可以了
1 | // https://nuxt.com/docs/api/configuration/nuxt-config |
assets目录
写在assets目录下的css,一般都是scss、sass、less,至于在nuxt中如何安装scss、sass、less,可以看我别的文章
有好几种方式
第一种:跟普通的css一样,在nuxt配置文件中配置
1 | // https://nuxt.com/docs/api/configuration/nuxt-config |
第二种:直接在app.vue中引入css文件
1 | <script> |
第三种:也是在nuxt配置文件中配置(这种方式可以注册全局css变量)
nuxt2的写法 : styleResources
1 | // https://nuxt.com/docs/api/configuration/nuxt-config |
nuxt3的写法:vite.css.preprocessorOptions.less.additionalData
1 | // https://nuxt.com/docs/api/configuration/nuxt-config |
-
感谢你赐予我前进的力量
赞赏者名单
因为你们的支持让我意识到写文章的价值🙏
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 哇子
评论