mpx (原生增强)
externalClasses 提醒
mpx 自定义组件如果声明了 externalClasses
,请在插件配置的 customAttributes
中列出这些属性。否则像 my-class="bg-[#fafa00] text-[40px]"
这样的写法会被微信开发者工具拆成无效片段,导致样式失效。
详细说明与更多示例请查阅 👉 《组件外部样式类(externalClasses)的支持》。
在 vue.config.js
中注册:
vue.config.js
const { defineConfig } = require('@vue/cli-service')
const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack')
module.exports = defineConfig({
// other options
configureWebpack(config) {
config.plugins.push(
new UnifiedWebpackPluginV5({
rem2rpx: true,
})
)
}
})
mpx 中的 vscode tailwindcss 智能提示缺失设置
我们知道 tailwindcss
最佳实践,是要结合 vscode
/webstorm
提示插件一起使用的。
假如你遇到了,在 vscode
的 mpx
文件中,编写 class
没有出智能提示的情况,可以参考以下步骤。
这里我们以 vscode
为例:
接着找到 Tailwind CSS IntelliSense
的 扩展设置
在 include languages
,手动标记 mpx
的类型为 html
保存设置,再去mpx
文件里写class
的时候,智能提示就出来啦。