html css 微信小程序,tailwindcss 支持微信小程序配置
安装postcss插件
npm install -D postcss-class-rename
postcss-class-rename 是将小程序不支持的css类重命名
tailwindcss配置移除不支持的css样式
module.exports = {
// Tree-shake unused styles in production build
// purge: ['./src/**/*.{vue,js,ts,jsx,tsx,html}'],
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
// Disable breakpoints
screen: {}
},
variants: {
extend: {},
},
plugins: [],
corePlugins: {
space: false,
divideWidth: false,
divideColor: false,
divideStyle: false,
divideOpacity: false,
}
}
由于上面space/divideWidth等样式包含微信小程序不支持的写法:.className > :not([hidden]) ~ :not([hidden]),所以移除。
uniapp 配置postcss.config.js如下:
const path = require('path')
module.exports = {
parser: require('postcss-comment'),
plugins: [
require('postcss-import')({
resolve(id, basedir, importOptions) {
if (id.startsWith('~@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
} else if (id.startsWith('@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
} else if (id.startsWith('/') && !id.startsWith('//')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
}
return id
}
}),
/* ******* 引入tailwindcss ******* */
require('tailwindcss')({}),
//
// // 根据平台差异进行不同的样式处理
...(
process.env.UNI_PLATFORM !== "h5"
? [
// 使用postcss-class-name 包将小程序不支持的类名写法转换为支持的类名,如:"hover:xxx"
require("postcss-class-rename")({
"\\\\:": "--",
// "\\\\/": "--",
"\\\\.": "--",
".:": "--"
})
]
: [
require("autoprefixer")({
remove: true,
}),
]
),
/* ******* ******* */
require('@dcloudio/vue-cli-plugin-uni/packages/postcss'),
...(process.env.NODE_ENV === "production" ? ['purgecss'] : []),
]
}
/* ******* ******* */之间是关键配置
标签:false,process,微信,require,程序,tailwindcss,path,postcss,id
来源: https://www.cnblogs.com/li1234yun/p/14257579.html
html css 微信小程序,tailwindcss 支持微信小程序配置相关推荐
- macOS 版微信小助手,支持微信多开、防撤回、远程控制mac、自动回复等等
微信小助手 GitHub大牛提供的微信小助手是一款插件,该插件具备多开.防撤回.免手机认证登录.自动回复.远程控制自己的 macOS.群发等众多功能 GitHub网址:https://github.c ...
- 业务实时监控服务ARMS推出小程序监控支持各种小程序
阿里云ARMS业务实时监控服务全新推出小程序监控,支持多种小程序,阿里云百科网分享: ARMS小程序监控 阿里云ARMS小程序监控 ARMS全面监控小程序,三大特色助力提升用户体验: 覆盖各类小程序监 ...
- 淘宝接入微信,并将支持微信支付
第一:3点关键信息 1:阿里这么做很显然是为了淘宝特价版的商家.消费者和平台多赢的目的出发 2:淘宝特价版在微信开通了小程序,商家以及用户更加方便. 3:淘宝特性版APP支持微信支付,商家以及用户更加 ...
- 微信公众号python_wechat: 微信 Python SDK,支持微信公众号以及企业号的上行消息及 OAuth 接口...
微信公众号Python-SDK 本SDK支持微信公众号以及企业号的上行消息及OAuth接口.本文档及SDK假设使用者已经具备微信公众号开发的基础知识,及有能力通过微信公众号.企业号的文档来查找相关的接 ...
- JeewxBoot微信管家平台 支持微信公众号/小程序/微信第三方平台/抽奖活动等
JeewxBoot是一款免费的JAVA微信管家平台,支持微信公众号.小程序.微信第三方平台.抽奖活动等.JeewxBoot已经实现了系统权限管理.公众号管理.抽奖活动等基础功能,便于二次开发,可以快速 ...
- 脱离微信运行环境,小程序如何实现微信授权登录
据微信 2021 年财报披露,微信小程序 DAU 已经突破 5 亿,微信生态从业者超过 3000 万.阿拉丁研究院基于小程序数据库和公开资料测算,2022 年 H1 期间,微信.支付宝.抖音.快手等多 ...
- 微信小程序日记、微信小程序个人空间、个人日记
一.简述 个人比较喜欢微信小程序,因为小程序所追求的用户体验.代码质量.美观的样式,简单方便丰富的api.样式封装等,同时又与普通的前端开发非常相似,让人很容易就上手. 这篇博客介绍的是一款记录个人/ ...
- 通过微信模板消息跳转到小程序
关注小编微信公众号公众号[前端基础教程从0开始]回复"1",拉你进程序员技术讨论群,群内有大神,可以免费提供问题解答.公众号回复"小程序",领取300个优秀的小 ...
- JeeWx捷微2.4.1版本发布,JAVA微信管家平台(支持公众号、企业号)
JeeWx捷微2.4.1版本发布,JAVA微信管家平台(支持公众号.企业号) 1.JEEWX平台介绍 Jeewx是一款开源.敏捷.组件化的微信管家平台,支持微信公众号.微信企业号管理,采用JAVA语 ...
最新文章
- 企业分布式微服务云SpringCloud SpringBoot mybatis - 服务消费者(Feign)
- CPU工作过程——MCU
- ICLR 2020将采用远程会议,首次在非洲办会可能就这样泡汤了
- 服务器图片加载慢_页面提高性能利器_懒加载
- 数据结构与算法-------希尔排序------交换法+移动法
- 内存颗粒位宽和容量_内存颗粒编码原则,方便大家识别颗粒是否可用与扩容
- 开咖啡店如何盈利?用50家咖啡店揭晓一套盈利模式
- 第十二周项目四----利用遍历思想求解图问题之输出简单路径
- MySQL默认数据库介绍
- [iOS][转]iOS 架构模式 - 简述 MVC, MVP, MVVM 和 VIPER (译)
- いくつかの愛に心が飛作者が恋しい
- 浮点数强制转换整数,四舍五入
- 登录已失效,身份过期,该怎么办?
- Windows 7驱动开发系列(四)--WDM模型介绍
- SABER 最强大的数模混合信号仿真软件
- 【JSP】用户信息界面操作 ---- 用户信息修改
- superset二次开发
- zcash的Jubjub
- stm32采集脉冲信号_随机脉冲信号采集卡的设计
- 以华泰、国泰君安、平安证券为例:探究券商APP会员体系