uni-app 使用hbuilder发布小程序时wxss报错（使用tailwind），但运行时正常

发布于 1周前 作者 caililin 来自 Uni-App

uni-app 使用hbuilder发布小程序时wxss报错（使用tailwind），但运行时正常

项目信息 值
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 Apple M1 Pro
HBuilderX类型 正式
HBuilderX版本号 4.29
第三方开发者工具版本号 RC 1.06.2402021
基础库版本号 2.29.2
项目创建方式 HBuilderX

示例代码：

<script setup lang="ts">  
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";  
onLaunch(() => {  
  console.log("App Launch");  
});  
onShow(() => {  
  console.log("App Show");  
});  
onHide(() => {  
  console.log("App Hide");  
});  
</script>  

<style>  
@import "tailwindcss/base";  
@import "tailwindcss/components";  
@import "tailwindcss/utilities";  

body,  
html {  
  width: 100%;  
  height: 100%;  
  font-family: "Source Han Sans SC";  
  background: #f9fafb !important;  
}  

page {  
  width: 100%;  
  height: 100%;  
  background: #f9fafb !important;  
}  

/* uni-app中的条件判断语句 */  
/* #ifdef APP-PLUS  || H5 */  
uni-swiper .uni-swiper-dot {  
  width: 12rpx;  
  height: 12rpx;  
}  
uni-swiper .uni-swiper-dot-active {  
  width: 16rpx;  
  border-radius: 16rpx;  
}  
/* #endif */  

/* #ifdef MP-WEIXIN */  
wx-swiper .wx-swiper-dot {  
  width: 12rpx;  
  height: 12rpx;  
}  

wx-swiper .wx-swiper-dot-active {  
  width: 16rpx;  
  height: 16rpx;  
}  
/* #endif */  
</style>

操作步骤：

  • 运行正常，发行报错

预期结果：

  • 可以发行成功

实际结果：

  • 发行失败

bug描述：

[ WXSS 文件编译错误] ./app.wxss
unexpected token “}”

![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20241113/fb156adf5c8c341cbd8898a628d4afde.png)

Harmonyos Next教程
1 回复

在uni-app中使用HBuilder发布小程序时遇到wxss（微信小程序样式表）报错，但运行时正常的情况，通常是由于构建过程中样式处理或路径解析的问题。由于你提到使用了Tailwind CSS，这里提供一个可能的解决方案，通过自定义构建脚本和配置来确保Tailwind CSS能够正确编译并输出到小程序中。

步骤一：安装Tailwind CSS

首先，确保你的项目已经安装了Tailwind CSS。如果没有安装，可以通过以下命令安装：

npm install tailwindcss@latest postcss@latest autoprefixer@latest

然后初始化Tailwind配置文件：

npx tailwindcss init -p

步骤二：配置Tailwind

在tailwind.config.js中配置你的设计系统。这里是一个基本的配置示例：

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

步骤三：创建PostCSS配置文件

在项目根目录创建postcss.config.js，配置PostCSS以使用Tailwind：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

步骤四：自定义uni-app的构建脚本

由于uni-app默认不直接支持Tailwind CSS的编译，你可能需要自定义构建脚本。这通常涉及到使用Webpack或其他构建工具来预处理CSS文件。但考虑到uni-app的特殊性，我们可以尝试直接在HBuilder中配置外部工具链。

  1. 在HBuilder中，打开“运行” -> “运行配置”。
  2. 选择你的小程序项目，点击“自定义命令”。
  3. 在“自定义命令”中添加一个命令，用于运行Tailwind CSS的编译脚本（假设你已经编写了一个脚本来处理CSS文件的编译）。

示例编译脚本（Node.js）

const fs = require('fs');
const postcss = require('postcss');
const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');

const input = fs.readFileSync('src/styles/tailwind.css', 'utf8');

postcss([tailwindcss, autoprefixer]).process(input).then(result => {
  fs.writeFileSync('dist/wxss/app.wxss', result.css);
});

确保这个脚本在每次构建前运行，以生成小程序可识别的app.wxss文件。

结论

由于uni-app和Tailwind CSS的集成不是官方支持的功能，因此可能需要一些自定义配置和脚本。上述方法提供了一种可能的解决方案，但具体实现可能需要根据你的项目结构和需求进行调整。

回到顶部