注册 登录
1***@qq.com
1***@qq.com
  • 发布：2023-05-30 22:00
  • 更新：2023-06-01 15:00
  • 阅读：340

【报Bug】自定义调试基座和正式包的表现不一致，导致我的tailwindcss变量写法失效

分类：uni-app

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： win10

HBuilderX类型： 正式

HBuilderX版本号： 3.8.3

手机系统： 全部

手机厂商： 华为

页面类型： vue

vue版本： vue2

打包方式： 云端

项目创建方式： HBuilderX

测试过的手机：

小米11u、ip8

示例代码：

依赖

{  
  "name": "my-project",  
  "version": "0.1.0",  
  "private": true,  
  "scripts": {  
    "serve": "npm run dev:h5",  
    "build": "npm run build:h5",  
    "build:uat": "cross-env NODE_ENV=production VUE_APP_ENV=uatuation UNI_PLATFORM=h5 vue-cli-service uni-build",  
    "build:app-plus": "cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",  
    "build:custom": "cross-env NODE_ENV=production uniapp-cli custom",  
    "build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",  
    "build:master": "cross-env NODE_ENV=production VUE_APP_ENV=prod UNI_PLATFORM=h5 vue-cli-service uni-build",  
    "build:sit": "cross-env NODE_ENV=production VUE_APP_ENV=situation UNI_PLATFORM=h5 vue-cli-service uni-build",  
    "build:mp-360": "cross-env NODE_ENV=production UNI_PLATFORM=mp-360 vue-cli-service uni-build",  
    "build:mp-alipay": "cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build",  
    "build:mp-baidu": "cross-env NODE_ENV=production UNI_PLATFORM=mp-baidu vue-cli-service uni-build",  
    "build:mp-jd": "cross-env NODE_ENV=production UNI_PLATFORM=mp-jd vue-cli-service uni-build",  
    "build:mp-kuaishou": "cross-env NODE_ENV=production UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build",  
    "build:mp-lark": "cross-env NODE_ENV=production UNI_PLATFORM=mp-lark vue-cli-service uni-build",  
    "build:mp-qq": "cross-env NODE_ENV=production UNI_PLATFORM=mp-qq vue-cli-service uni-build",  
    "build:mp-toutiao": "cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build",  
    "build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize",  
    "build:mp-xhs": "cross-env NODE_ENV=production UNI_PLATFORM=mp-xhs vue-cli-service uni-build",  
    "build:mp-weixin-sit": "cross-env NODE_ENV=production VUE_APP_ENV=situation UNI_PLATFORM=mp-weixin vue-cli-service uni-build",  
    "build:mp-weixin-uat": "cross-env NODE_ENV=production VUE_APP_ENV=uatuation UNI_PLATFORM=mp-weixin vue-cli-service uni-build",  
    "build:mp-weixin-master": "cross-env NODE_ENV=production VUE_APP_ENV=prod UNI_PLATFORM=mp-weixin vue-cli-service uni-build",  
    "build:quickapp-native": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-native vue-cli-service uni-build",  
    "build:quickapp-webview": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview vue-cli-service uni-build",  
    "build:quickapp-webview-huawei": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build",  
    "build:quickapp-webview-union": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build",  
    "dev:app-plus": "cross-env NODE_ENV=development UNI_PLATFORM=app-plus vue-cli-service uni-build --watch",  
    "dev:custom": "cross-env NODE_ENV=development uniapp-cli custom",  
    "dev:h5": "cross-env NODE_ENV=development VUE_APP_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",  
    "dev:mp-360": "cross-env NODE_ENV=development UNI_PLATFORM=mp-360 vue-cli-service uni-build --watch",  
    "dev:mp-alipay": "cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay vue-cli-service uni-build --watch",  
    "dev:mp-baidu": "cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch",  
    "dev:mp-jd": "cross-env NODE_ENV=development UNI_PLATFORM=mp-jd vue-cli-service uni-build --watch",  
    "dev:mp-kuaishou": "cross-env NODE_ENV=development UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build --watch",  
    "dev:mp-lark": "cross-env NODE_ENV=development UNI_PLATFORM=mp-lark vue-cli-service uni-build --watch",  
    "dev:mp-qq": "cross-env NODE_ENV=development UNI_PLATFORM=mp-qq vue-cli-service uni-build --watch",  
    "dev:mp-toutiao": "cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch",  
    "dev:mp-weixin": "cross-env NODE_ENV=development VUE_APP_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",  
    "dev:mp-xhs": "cross-env NODE_ENV=development UNI_PLATFORM=mp-xhs vue-cli-service uni-build --watch",  
    "dev:quickapp-native": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-native vue-cli-service uni-build --watch",  
    "dev:quickapp-webview": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview vue-cli-service uni-build --watch",  
    "dev:quickapp-webview-huawei": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build --watch",  
    "dev:quickapp-webview-union": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build --watch",  
    "info": "node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js",  
    "serve:quickapp-native": "node node_modules/@dcloudio/uni-quickapp-native/bin/serve.js",  
    "test:android": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=android jest -i",  
    "test:h5": "cross-env UNI_PLATFORM=h5 jest -i",  
    "test:ios": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=ios jest -i",  
    "test:mp-baidu": "cross-env UNI_PLATFORM=mp-baidu jest -i",  
    "test:mp-weixin": "cross-env UNI_PLATFORM=mp-weixin jest -i",  
    "postinstall": "weapp-tw patch"  
  },  
  "dependencies": {  
    "@dcloudio/uni-app": "2.0.2-alpha-3080320230522001",  
    "@dcloudio/uni-app-plus": "2.0.2-alpha-3080320230522001",  
    "@dcloudio/uni-h5": "2.0.2-alpha-3080320230522001",  
    "@dcloudio/uni-i18n": "2.0.2-alpha-3080320230522001",  
    "@dcloudio/uni-mp-360": "2.0.2-alpha-3080320230522001",  
    "@dcloudio/uni-mp-alipay": "2.0.2-alpha-3080320230522001",  
    "@dcloudio/uni-mp-baidu": "2.0.2-alpha-3080320230522001",  
    "@dcloudio/uni-mp-jd": "2.0.2-alpha-3080320230522001",  
    "@dcloudio/uni-mp-kuaishou": "2.0.2-alpha-3080320230522001",  
    "@dcloudio/uni-mp-lark": "2.0.2-alpha-3080320230522001",  
    "@dcloudio/uni-mp-qq": "2.0.2-alpha-3080320230522001",  
    "@dcloudio/uni-mp-toutiao": "2.0.2-alpha-3080320230522001",  
    "@dcloudio/uni-mp-vue": "2.0.2-alpha-3080320230522001",  
    "@dcloudio/uni-mp-weixin": "2.0.2-alpha-3080320230522001",  
    "@dcloudio/uni-mp-xhs": "2.0.2-alpha-3080320230522001",  
    "@dcloudio/uni-quickapp-native": "2.0.2-alpha-3080320230522001",  
    "@dcloudio/uni-quickapp-webview": "2.0.2-alpha-3080320230522001",  
    "@dcloudio/uni-stacktracey": "2.0.2-alpha-3080320230522001",  
    "@dcloudio/uni-stat": "2.0.2-alpha-3080320230522001",  
    "@vue/shared": "^3.0.0",  
    "core-js": "^3.8.3",  
    "flyio": "^0.6.2",  
    "js-md5": "^0.7.3",  
    "jsencrypt": "^3.0.0-rc.1",  
    "luch-request": "^3.0.8",  
    "sa-sdk-miniprogram": "^1.17.10",  
    "tki-qrcode": "^0.1.6",  
    "uni-read-pages": "^1.0.5",  
    "uni-simple-router": "^2.0.8-beta.4",  
    "vconsole": "^3.14.6",  
    "vue": "^2.6.14",  
    "vuex": "^3.2.0"  
  },  
  "devDependencies": {  
    "@babel/eslint-parser": "^7.21.3",  
    "@babel/runtime": "^7.21.5",  
    "@dcloudio/types": "*",  
    "@dcloudio/uni-automator": "2.0.2-alpha-3080320230522001",  
    "@dcloudio/uni-cli-i18n": "2.0.2-alpha-3080320230522001",  
    "@dcloudio/uni-cli-shared": "2.0.2-alpha-3080320230522001",  
    "@dcloudio/uni-helper-json": "*",  
    "@dcloudio/uni-migration": "2.0.2-alpha-3080320230522001",  
    "@dcloudio/uni-template-compiler": "2.0.2-alpha-3080320230522001",  
    "@dcloudio/vue-cli-plugin-hbuilderx": "2.0.2-alpha-3080320230522001",  
    "@dcloudio/vue-cli-plugin-uni": "2.0.2-alpha-3080320230522001",  
    "@dcloudio/vue-cli-plugin-uni-optimize": "2.0.2-alpha-3080320230522001",  
    "@dcloudio/webpack-uni-mp-loader": "2.0.2-alpha-3080320230522001",  
    "@dcloudio/webpack-uni-pages-loader": "2.0.2-alpha-3080320230522001",  
    "@ttou/uview-typings": "^2.0.4",  
    "@vue/cli-plugin-babel": "~5.0.8",  
    "@vue/cli-service": "~5.0.8",  
    "@vue/eslint-config-prettier": "^7.1.0",  
    "babel-eslint": "^10.1.0",  
    "babel-plugin-component": "^1.1.1",  
    "babel-plugin-import": "^1.11.0",  
    "cross-env": "^7.0.2",  
    "eslint": "^8.37.0",  
    "eslint-config-prettier": "^8.5.0",  
    "eslint-plugin-html": "^4.0.5",  
    "eslint-plugin-import": "^2.13.0",  
    "eslint-plugin-node": "^6.0.1",  
    "eslint-plugin-prettier": "^4.0.0",  
    "eslint-plugin-promise": "^3.8.0",  
    "eslint-plugin-vue": "^9.10.0",  
    "jest": "^25.4.0",  
    "mini-types": "*",  
    "miniprogram-api-typings": "*",  
    "postcss-comment": "^2.0.0",  
    "postcss-rem-to-responsive-pixel": "^5.1.3",  
    "prettier": "^2.8.7",  
    "prettier-plugin-tailwindcss": "^0.3.0",  
    "sass": "^1.26.5",  
    "sass-loader": "13.2.2",  
    "tailwindcss": "^3.3.2",  
    "vue-template-compiler": ">= 2.6.14 < 2.7",  
    "weapp-tailwindcss-webpack-plugin": "^2.4.2"  
  },  
  "browserslist": [  
    "Android >= 6.0",  
    "ios >= 9"  
  ],  
  "uni-app": {}  
}

postcss.config.js

const { WeappTailwindcssDisabled } = require("./platform");  
const path = require('path')  
const webpack = require('webpack')  
const config = {  
  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  
      }  
    }),  
    require("tailwindcss")({  
      config: path.resolve(__dirname, "./tailwind.config.js")  
    }),  
    require('autoprefixer')({  
      remove: process.env.UNI_PLATFORM !== 'h5'  
    }),  
    WeappTailwindcssDisabled  
      ? undefined  
      : require("postcss-rem-to-responsive-pixel")({  
        rootValue: 32,  
        propList: ["*"],  
        transformUnit: "rpx",  
      }),  
    require('@dcloudio/vue-cli-plugin-uni/packages/postcss')  
  ]  
}  
if (webpack.version[0] > 4) {  
  delete config.parser  
}  
module.exports = config

操作步骤：

在界面上使用tailwindcss变量写法

预期结果：

动态生成tailwindcss变量写法对应的css

实际结果：

tailwindcss变量写法失效，iphone8调试基座打不开

bug描述：

  • 项目使用了tailwindcss，在小程序表现很好，云原生打包后也支持，但是在自定义基座下，变量写法就失效了，例如 text-[#C0C4CC]，
    pb-[13px]
  • iphone8直接打不开调试基座，报错 
    Uncaught SyntaxError: Invalid regular expression flags  
at ./src/store/modules/user.js (app-service.js:75062)  
at __webpack_require__ (app-service.js:42)  
at eval (store.js:1)  
at ./src/store/store.js (app-service.js:75075)  
at __webpack_require__ (app-service.js:42)  
at eval (index.js??clonedRuleSet-10[0].rules[0].use[0]!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??clonedRuleSet-10[0].rules[0].use[1]!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/using-components.js!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!./src/App.vue?vue&type=script&lang=js&:9)  
at ./node_modules/babel-loader/lib/index.js??clonedRuleSet-10[0].rules[0].use[0]!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??clonedRuleSet-10[0].rules[0].use[1]!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/using-components.js!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!./src/App.vue?vue&type=script&lang=js& (app-service.js:70435)  
at __webpack_require__ (app-service.js:42)  
at eval (null:1)  
at ./src/App.vue?vue&type=script&lang=js& (app-service.js:11299)
2023-05-30 22:00 负责人:无 分享

没有找到相关结果

    已邀请:
    1***@qq.com

    1***@qq.com (作者)

    人都没有一个

    2023-05-31 18:57 分享
    1***@qq.com

    1***@qq.com (作者)

    人都没有一个

    2023-06-01 14:32 分享
    DCloud_UNI_LXH

    DCloud_UNI_LXH

    如果写成 \[#C0C4CC\] 试试看是否可以

    2023-06-01 15:00 分享

    • 1***@qq.com (作者)

      试了下，不行

      2023-06-01 18:41

    • 1***@qq.com (作者)

      自定义基座打包不会触发postcss-loader的吗？

      2023-06-01 18:42

    评论 取消
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    退出全屏模式 全屏模式 回复
    友情链接
    优势智云 黑马程序员 程序员客栈 个推 锐亚教育 即速应用 DCloud新闻 InfoQ 蓝莺IM HeapDump性能社区 diygw可视化 申请友链

    DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位

    京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001

    | | 违法违规信息举报