Comments (8)
嗯,好的我排查一下,
低hbuilderx版本不会出现这个问题是吧?
另外你使用的 weapp tailwindcss 版本是多少?
还有是uni app vue3 vite 嘛?
from weapp-tailwindcss.
项目: https://github.com/sonofmagic/uni-app-vue3-tailwind-hbuilder-template ,
依赖项:
"tailwindcss": "^3.3.5",
"weapp-tailwindcss": "^3.0.0"
我的系统是: MacOS 14.2
经过测试,
hbuilderx 3.96 是ok的,没有这个问题
升级到 hbuilderx 3.98 ,更改类名后保存也是ok的:
可以看到图上,只差量编译编译了一次
我需要更多更加详细的信息补充,以复现你这个问题
或者你可以提供可以复现的demo link
from weapp-tailwindcss.
依赖项
"devDependencies": {
"autoprefixer": "^9.8.8",
"postcss": "^7.0.39",
"postcss-rem-to-responsive-pixel": "^5.1.3",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
"weapp-tailwindcss-webpack-plugin": "^1.12.8",
"webpack": "npm:webpack@^4.46.0"
}
之前在3.7版本是好好的,3.96以上的版本就会重复编译
from weapp-tailwindcss.
这次我用了这个模板 https://github.com/sonofmagic/uni-app-vue2-tailwind-hbuilder-template
依赖项和你应该是一样的
也去使用了macos 的 hbuilderx 3.98 版本运行,修改之后结果如下
差量编译也只出现了一次,没有复现这个问题,你可以试试用你的 hbuilderx 跑一下这个模板试试
from weapp-tailwindcss.
from weapp-tailwindcss.
win10 hbuilderx3.98
from weapp-tailwindcss.
复现过程
我找了个 windows 机器,下载了 hbuilderx3.98 复现了这个问题,排查下来和插件无关,和 tailwindcss v2
的 TAILWIND_MODE
环境变量有关,我把 :
process.env.TAILWIND_MODE = "watch"
这个去掉,差量编译重复的问题就好了,但是这个 TAILWIND_MODE
环境变量是 tailwindcss v2
热更新的开关,假如关了它,你在代码里写 w-[111px]
这样的类名是不会实时生效的,必须要重新编译才会生成。
这个问题只在 windows 上 hbuilderx 出现, macos hbuilderx 没有这样的问题,同时 tailwindcss v3
没有这样的问题。
解决方案
所以解决方案为:
-
要不你把项目转化成 cli 版本,cli 版本的 vue2 直接使用的 webpack5,postcss8 可以直接使用最新版本的 tailwindcss 和我这个插件。(也有一种 hack hbuilderx,强行让它执行 webpack5,postcss8 的方案,详见这个链接)
-
或者找个办法,在注入
TAILWIND_MODE
环境变量的同时,hbuilderx 还不会重新差量编译。 -
或者这个问题反馈给
hbuilderx
官方,看看他们有没有什么方式解决。
另外
我还试了在 package.json
里这样写脚本,结果是无效的:
"uni-app": {
"scripts": {
"dev": {
"title": "开发微信小程序",
"browser": "",
"env": {
"UNI_PLATFORM": "mp-weixin",
"TAILWIND_MODE": "watch"
},
"define": {}
}
}
}
然后在 vue.config.js
里打印 console.log(process.env.TAILWIND_MODE)
结果也是空的,hbuilderx 环境变量比较封闭,不知道咋搞进去。
from weapp-tailwindcss.
好的,太感谢作者了
from weapp-tailwindcss.
Related Issues (20)
- 使用原生小程序开发模板时,如何使用其他npm包? HOT 2
- 是否支持引用外部包组件? HOT 2
- taro3 + reactjs + weapp-tailwindcss css 语法转义不成功 HOT 2
- vite how to px 2 rpx HOT 2
- uniapp vue3环境下使用,有时候会出现类名未生成样式的情况 HOT 4
- 有单独的 JS API 么? HOT 3
- hbuilder原生创建的项目无法使用webpack5,如何升级? HOT 1
- v3 大版本改动与迁移 HOT 1
- TypeError: Cannot destructure property 'Compilation' of 'compiler.webpack' as it is undefined. HOT 2
- taro rn模式适配 HOT 1
- [postcss] text.replaceAll is not a function HOT 2
- 请问支持 app-nvue 吗? HOT 3
- 是否支持使用taro+weap-tailwindcss开发京东小程序, HOT 1
- 新创建的Taro项目按指南配置后,出现wxml文件编译错误 HOT 1
- htmlparser2 更新之后, 导致 wxml 编译失败, 缺少最后的引号 HOT 1
- 谁在使用 weapp-tailwindcss ? HOT 12
- @layer中自定义的类偶尔会失效 HOT 9
- 使用 daisyui 在小程序里面 wxss 编译错误 HOT 2
- 和腾讯的TDesign组件库一起使用时报错 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from weapp-tailwindcss.