-
-
Notifications
You must be signed in to change notification settings - Fork 86
-
-
Notifications
You must be signed in to change notification settings - Fork 86
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
3.1.1版本在taro下不能正常进行JIT编译,会将text-[16px]编译成 text -16xp。而使用weapp-tailwindcss-webpack-plugin@1.12.8 却一切正常 #287
Comments
其实从 v2 版本开始,我就更改了一下 v1 版本的 "scripts": {
+ "postinstall": "weapp-tw patch"
} 这个脚本主要是用来暴露 tailwindcss 运行上下文给 你在从 v1 迁移到 v3 的时候,记得添加并执行一下,然后更换一下插件,这样才能从 tailwindcss 的 postcss 插件里面,取出上下文去精确修改类似 |
谢谢您的回答,但我已经是添加过这个脚本了的,并且也单独执行过的,并且执行不止一次。 $ npx weapp-tw patch
$ pnpm run postinstall
> moto-insurance-user-taro@1.0.0 postinstall D:\1workspace\project\base-taro-template
> weapp-tw patch
|
tailwindcss也升级到3的最新版本了吗,发一下你的那些环境,以及依赖包的版本呢。 当然有最小化的复现案例那最好😁😁 |
以下是我的依赖 "dependencies": {
"@antmjs/vantui": "^3.3.5",
"@babel/runtime": "^7.7.7",
"@fch/fch-tool": "^2.0.5",
"@tanstack/react-query": "^4.20.4",
"@tarojs/components": "3.6.14",
"@tarojs/helper": "3.6.14",
"@tarojs/plugin-framework-react": "3.6.14",
"@tarojs/plugin-html": "3.5.10",
"@tarojs/plugin-platform-alipay": "3.6.14",
"@tarojs/plugin-platform-jd": "3.6.14",
"@tarojs/plugin-platform-qq": "3.6.14",
"@tarojs/plugin-platform-swan": "3.6.14",
"@tarojs/plugin-platform-tt": "3.6.14",
"@tarojs/plugin-platform-weapp": "3.6.14",
"@tarojs/react": "3.6.14",
"@tarojs/router": "3.6.14",
"@tarojs/runtime": "3.6.14",
"@tarojs/shared": "3.6.14",
"@tarojs/taro": "3.6.14",
"@tarojs/taro-h5": "3.6.14",
"axios": "^0.26.0",
"rc-field-form": "^1.27.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-refresh": "^0.11.0",
"rxjs": "^7.5.6",
"windicss": "^3.5.6",
"zustand": "^4.1.5"
},
"devDependencies": {
"@babel/core": "^7.8.0",
"@dcasia/mini-program-tailwind-webpack-plugin": "^1.5.6",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
"@tarojs/cli": "3.6.14",
"@tarojs/webpack5-runner": "3.6.14",
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.10",
"@types/react-router-dom": "^5.1.7",
"@types/react-syntax-highlighter": "^13.5.2",
"@types/react-test-renderer": "^18.0.0",
"@types/react-transition-group": "^4.4.4",
"@types/webpack-env": "^1.13.6",
"@typescript-eslint/eslint-plugin": "^5.20.0",
"@typescript-eslint/parser": "^5.20.0",
"autoprefixer": "^10.4.13",
"babel-plugin-import": "^1.13.5",
"babel-preset-taro": "3.5.10",
"eslint": "^8.12.0",
"eslint-config-taro": "3.5.10",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-react": "^7.8.2",
"eslint-plugin-react-hooks": "^4.2.0",
"postcss": "^8.4.20",
"postcss-rem-to-responsive-pixel": "^5.1.3",
"style-loader": "1.3.0",
"stylelint": "^14.4.0",
"tailwindcss": "^3.2.4",
"typescript": "^3.7.0",
"weapp-tailwindcss": "^3.1.1",
"weapp-tailwindcss-webpack-plugin": "^1.12.8",
"webpack": "^5.74.0"
} 以下是我 home 的代码 import { View } from '@tarojs/components';
import { FC } from 'react';
const HomePage: FC = () => {
return <View className='text-[red]'>Taro! 启动</View>;
};
export default HomePage; 我还可以提供的是我的 config 配置 与 tailwind配置: const getAlias = require('./alias');
const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack')
// const { TaroWeappTailwindcssWebpackPluginV5 } = require('weapp-tailwindcss-webpack-plugin');
const config = {
projectName: 'base-taro-template',
date: '2022-12-13',
designWidth: 750,
alias: {
...getAlias()
},
deviceRatio: {
640: 2.34 / 2,
750: 1,
828: 1.81 / 2,
375: 2 / 1
},
sourceRoot: 'src',
outputRoot: 'dist',
plugins: ['@tarojs/plugin-html'],
defineConstants: {
},
copy: {
patterns: [
],
options: {
}
},
framework: 'react',
compiler: 'webpack5',
cache: {
enable: false // Webpack 持久化缓存配置,建议开启。默认配置请参考:https://docs.taro.zone/docs/config-detail#cache
},
mini: {
webpackChain(chain, webpack) {
chain.merge({
plugin: {
install: {
plugin: UnifiedWebpackPluginV5,
args: [
{
appType: 'taro',
}
]
}
}
});
},
postcss: {
pxtransform: {
enable: true,
config: {
selectorBlackList: ['nut-']
}
},
url: {
enable: true,
config: {
limit: 1024 // 设定转换尺寸上限
}
},
cssModules: {
enable: true, // 默认为 false,如需使用 css modules 功能,则设为 true
config: {
namingPattern: 'module', // 转换模式,取值为 global/module
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
}
},
h5: {
publicPath: '/',
esnextModules: [/@antmjs[\\/]vantui/],
staticDirectory: 'static',
postcss: {
autoprefixer: {
enable: true,
config: {
}
},
pxtransform: {
enable: true,
config: {},
},
cssModules: {
enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true
config: {
namingPattern: 'module', // 转换模式,取值为 global/module
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
}
}
}
module.exports = function (merge) {
if (process.env.NODE_ENV === 'development') {
return merge({}, config, require('./dev'))
} else if (process.env.MODE === 'devBuild') {
return merge({}, config, require('./dev'));
}
return merge({}, config, require('./prod'))
} tailwind.config.js // 自定义项目主题色, vantui的主题色需在app.css中需单独配置
const PROJECT_THEME_COLOR = '#FF7043'
const customColors = {/* */
'theme-color': PROJECT_THEME_COLOR,
'icb-orange': '#FA5A4C',
'icb-teal': '#13BFBA',
'icb-blue': '#3751FF',
};
function withOpacityValue(variable) {
return ({ opacityValue }) => {
if (opacityValue === undefined) {
return `rgb(var(${variable}))`;
}
return `rgb(var(${variable}) / ${opacityValue})`;
};
}
function toRGB(colors) {
const tempColors = Object.assign({}, colors);
const rgbColors = Object.entries(tempColors);
for (const [key, value] of rgbColors) {
if (typeof value === "string") {
if (value.replace("#", "").length == 6) {
const aRgbHex = value.replace("#", "").match(/.{1,2}/g);
tempColors[key] = `${parseInt(aRgbHex[0], 16)} ${parseInt(aRgbHex[1], 16)} ${parseInt(aRgbHex[2], 16)}`;
}
} else {
tempColors[key] = toRGB(value);
}
}
return tempColors;
}
/** @type {import('tailwindcss').Config} */
const Config = {
content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
darkMode: 'class',
theme: {
extend: {
container: {
center: true,
},
colors: {
...customColors,
rgb: toRGB(customColors),
primary: withOpacityValue("--tailwind-primary-color"),
},
},
},
plugins: ['@tailwindcss/forms'],
corePlugins: {
preflight: false,
},
};
module.exports = Config |
如果长度被识别成颜色了,也可以这样处理: |
是的,之前我文档上也提到过 length 和 color 相关的任意值写法 https://weapp-tw.icebreaker.top/docs/issues/rpx-ambiguities 可以作为补充。 |
描述这个Bug
完全按照文档配置,但3.1.1版本在taro下不能正常进行JIT编译,会将text-[16px]编译成 text -16xp。而使用weapp-tailwindcss-webpack-plugin@1.12.8 却一切正常
config > index.js
运行环境
The text was updated successfully, but these errors were encountered: