@import导入css样式、scss变量用法、static目录

发布于:2025-07-21 ⋅ 阅读:(20) ⋅ 点赞:(0)

欢迎来到我的UniApp技术专栏!🎉 在这里,我将与大家分享关于UniApp开发的实用技巧、最佳实践和项目经验。

专栏特色:

📱 跨平台开发一站式解决方案
🚀 从入门到精通的完整学习路径
💡 实战项目经验分享
🔍 常见问题深度解析
无论你是刚接触UniApp的新手,还是有一定经验的开发者,都能在这里找到有价值的内容。我将持续更新最新技术动态和开发技巧,帮助大家提升开发效率,打造高质量的跨平台应用。

如果文章对你有帮助,别忘了点赞收藏🌟,也欢迎在评论区留言交流,我会及时回复大家的问题!

让我们一起探索UniApp的无限可能!

目录

一.@import导入css样式

1.在项目下,新建common目录

2.在common目录下,新建css目录

3.在css目录下,新建一个css文件

4.在需要的页面中,通过@import引入该样式文件

5.查看页面运行效果

二.scss变量用法

1.什么是scss变量?

2.如何使用scss变量?

3.如何自定义scss变量?

①在common目录下,新建scss目录

②在scss目录下,新建一个scss文件,里面写点自定义scss变量

③在uni.scss文件中,引入self.scss(自定义scss文件)

④在需要时,直接使用scss变量即可

⑤查看页面运行效果

三.static目录注意事项


一.@import导入css样式

1.在项目下,新建common目录

2.在common目录下,新建css目录

3.在css目录下,新建一个css文件

4.在需要的页面中,通过@import引入该样式文件

5.查看页面运行效果

二.scss变量用法

1.什么是scss变量?

uniapp自带一个uni.scss文件,里面存放了很多scss变量,如下图

2.如何使用scss变量?

比如我们要使用下面的scss变量

在目标页面的css样式中,直接复制变量名即可

查看效果

3.如何自定义scss变量?

①在common目录下,新建scss目录

②在scss目录下,新建一个scss文件,里面写点自定义scss变量

③在uni.scss文件中,引入self.scss(自定义scss文件)

④在需要时,直接使用scss变量即可

⑤查看页面运行效果

三.static目录注意事项

由上面可见,我们这些css、scss文件,都存在common(自定义目录)下,而不是放在static目录下。

这是因为:

因此这么做,可以使没用到的东西不被打包,从而减少空间的占用。

以上就是本篇文章的全部内容,喜欢的话可以留个免费的关注呦~~


网站公告

今日签到

点亮在社区的每一天
去签到