除了封装好的preset之外,我们可以封装自己定制化的preset,或者是只针对当前项目的一些配置。 UnoCSS有非常多的可配置项目,我在这里只介绍一下我使用的其中三种: theme 在我的理解中,这个是针对于theme切换而特化出来的,也可以用来配置一些全局变量,在配置文件的其他属性中使用。 theme: { colors: { shinyRed:'var(...
871 -- 21:25 App Vite项目中使用mockjs 907 -- 7:33 App CSS - 🤩 CSS图片悬停动画!超酷的Clip-Path效果! (提升卡片视觉!) 706 -- 9:56 App Vite配置scss全局变量 1023 -- 3:45 App 第40天|连续写100天CSS 3.1万 16 11:36 App 一镜到底,AI帮我写个管理后台。前端不要学了。 2424 -...
// style.scss@for$i from1through10{.m-#{$i}{margin:$i/4rem;}}复制代码 编译结果为: 代码语言:javascript 复制 .m-1{margin:0.25rem;}.m-2{margin:0.5rem;}/* ... */.m-10{margin:2.5rem;}复制代码 或许你为了方便生成了一大堆可使用的class,但是中间或许也有无效使用的产物。即使你只使用了...
已配置scss和less全局变量 别名配置 ts 原子化 css uni-vue3-ts-template uni-app Vue3 + TypeScript + Vite + Pinia + Unocss 模板项目 项目架构 api 接口 components 组件文件 enums 枚举 PageEnum 页面枚举 hooks hooks 函数库 locales 多语言
76 changes: 76 additions & 0 deletions 76 playground/src/uni.scss Original file line numberDiff line numberDiff line change @@ -0,0 +1,76 @@ /** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 *...
分享一个css框架unocss 可以通过class规则,生成对应样式,例如通过m-1生成margin: 0.25rem 而且规则可以通过 https://uno.antfu.me/ 进行查询 除了预制规则,还可以自定义规则: 代码语言:javascript 复制 rules:[['m-1',{margin:'0.25rem'}],] 即可生成 ...
环境变量配置支持 统一的代码规范与风格支持 漂亮的 login 404 页 支持 配置选择支持 svg-icon支持 多级缓存 历史菜单 面包屑导航 其余的(请查看app.ts 或者 .env文件 或者assets/styles/globals/layout.scss) node版本推荐 最低18,推荐20 使用(请一定使用pnpm) ...
准备就绪后,使用 HBuilderX 打开项目 通过顶部菜单栏,找到运行入口 选择一个目标设备,点击启动即可 打包构建 pnpm build:mp-weixin App 基于HBuilderX参考官方文档进行进一步的操作 其它更多运行脚本 查看package.json中的scripts css预处理 已配置scss和less全局变量 ...
如果需要启用自动构建,请将项目放在 github 中,同时在 Github 中访问Settings - Security - Actions secrets and variables - Actions配置 4 个变量,具体如下: 配置WECHAT_APPID 和 WECHAT_ENCODINGAESKEY ,值分别为微信小程序的 appid 和 密钥文件文本内容,参考官方文档,用于自动构建和上传到小程序。
* 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * ...