当前位置: 首页 > news >正文

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

欢迎来到我的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目录下。

这是因为:

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

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

http://www.lryc.cn/news/594118.html

相关文章:

  • CSS中Padding与Margin的区别
  • `TransportService` 是 **Elasticsearch 传输层的“中枢路由器”**
  • Dify 1.6 安装与踩坑记录(Docker 方式)
  • python网络爬虫小项目(爬取评论)超级简单
  • EXPLAIN:你的SQL性能优化透视镜
  • ESXi6.7硬件传感器红色警示信息
  • 小程序和H5数据mock配置过程
  • Redis 概率型数据结构实战指南
  • 借助AI学习开源代码git0.7之四update-cache
  • 响应式编程入门教程第九节:UniRx 高级特性与自定义
  • 分治算法---归并
  • 7. 命令模式
  • 一维数组练题习~
  • 算法题(176):three states
  • windows11环境配置torch-points-kernels库编译安装详细教程
  • 如何优雅解决缓存与数据库的数据一致性问题?
  • 循环黑洞:用Python生成银河系特效图
  • tidyverse-数据可视化 - 图形的分层语法
  • Web开发 04
  • Work SSD基础知识
  • jxORM--编程指南
  • 试用SAP BTP 02:试用SAP HANA Cloud
  • MySQL笔记3
  • Oracle触发器:数据世界的“隐形守护者“
  • Uniapp 纯前端台球计分器开发指南:能否上架微信小程序 打包成APP?
  • Github 贪吃蛇 主页设置
  • 将EXCEL或者CSV转换为键值对形式的Markdown文件
  • 【Python数据采集】Python爬取小红书搜索关键词下面的所有笔记的内容、点赞数量、评论数量等数据,绘制词云图、词频分析、数据分析
  • (LeetCode 面试经典 150 题 ) 1. 两数之和 (哈希表)
  • ps2025下载与安装教程(附安装包) 2025最新版photoshop安装教程