uni-app引用vant组件编译报错Unclosed bracket

最新推荐文章于 2024-07-19 14:43:05 发布

LEON劉先森

最新推荐文章于 2024-07-19 14:43:05 发布

阅读量3.6k

点赞数 12

文章标签： uni-app vue.js 小程序

本文链接：https://blog.youkuaiyun.com/qq_34456265/article/details/120965381

版权

在进行前端开发时遇到一个CSS错误，报错信息指出在.postcss-loader中存在未闭合的括号。经过排查，在index.wxss文件中发现一个URL引用缺少空格，修正后的代码为在'woff2'的逗号后添加了空格。问题解决后，确保了字体资源的正确加载，避免了样式显示异常。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

报错：

Module build failed (from ./node_modules/postcss-loader/src/index.js):
10:26:54.652 SyntaxError
10:26:54.653 (45:193) Unclosed bracket

全局搜索

https://img.yzcdn.cn/vant/vant-icon-d3825a.woff

找到index.wxss文件位置

...src:url(https://img.yzcdn.cn/vant/vant-icon-d3825a.woff2) format("woff2"),url(https://img.yzcdn.cn/vant/vant-icon-d3825a.woff) ......

在...("woff2"),url(https:..)的逗号后添加空格

...src:url(https://img.yzcdn.cn/vant/vant-icon-d3825a.woff2) format("woff2"), url(https://img.yzcdn.cn/vant/vant-icon-d3825a.woff) ......

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LEON劉先森

关注关注

12
点赞
踩
8

收藏

觉得还不错? 一键收藏
6
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

uniapp结合vant weapp使用，编译时报错

if.else.Z

12-24

1026

1、问题描述：uniapp结合vant weapp使用，编译时报错：(36:193) Unclosed bracket 解决方式：dist/icon/index.wxss 和 icon/index.vue 中的url前面要加空格 2、问题描述：uniapp结合vant weapp使用，编译时报错：TypeError: Cannot read property 'split' of undefined 解决方式：dist/common/version.js 中 return compareVersio

uni-app中uni-ui和vant-weapp冲突

Dylan666d的博客

03-18

1185

1. 需要下载vant的weapp版源码，将dist目录复制到uniapp项目中，路径：项目/wxcomponents/vant 2. 引入后hbuilderx会自动给每个组件生成一个vue文件，但是会包一层uni-shadow-root，如果同时使用uni官方的组件且是通过easycom的custom使用的，则会冲突，需要将正则改为^uni-((?!(shadow-root)).*) 3. 如果报了vant的css错误（Unclosed bracket），则全局搜索https://img.yzcdn.cn

6 条评论您还未登录，请先登录后发表或查看评论

uniapp引入vant报错Unclosed bracket

yy_demo的博客

10-27

942

可以在vant的lib里面的index.css中搜索format，然后在format括号的逗号后面，加一个空格。我是想按需引入的，所以创建了一个新的文件vant.config.js,然后在main.js中引入了这个文件。

uni-app 使用vant 组件时候报错Unclosed bracket

c1824338832的博客

10-12

438

在所有format('woff')，后面加空格。

uni-app中使用vant注意事项

soooyoung的博客

12-08

6787

需要下载vant的weapp版源码，将dist目录复制到uniapp项目中，路径：项目/wxcomponents/vant 引入后hbuilderx会自动给每个组件生成一个vue文件，但是会包一层uni-shadow-root，如果同时使用uni官方的组件且是通过easycom的custom使用的，则会冲突，需要将正则改为^uni-((?!(shadow-root)).) 如果报了vant的css错误（Unclosed bracket），则全局搜索https://img.yzcdn.cn/vant/van.

记录uniapp集成vant遇到的问题

lin13958756858的博客

12-10

1983

需求：用uniapp做h5开发，需要用到第三方UI库。步骤： 1.vant下载地址：GitHub - youzan/vant-weapp: 轻量、可靠的小程序 UI 组件库 2.复制UI库：将下载或者clone下来的dist文件悉数拷到uniapp创建的根目录下的wxcomponents 【ps:wxcomponents此文件需要自己手动创建，且名称不能更改，具体看uni-app官网】，此处我的目录结构为下图所示 3.引入UI库：首先在app.vue文件里面 @import "/w.

Vue进阶（幺伍捌）：vue 组包 CssSyntaxError unclosed bracket 错误解决方法

IT全栈华强工作室

09-27

5454

在Vue项目npm run build过程中，突然爆出CssSyntaxError unclosed bracket的错误提示，一脸懵，好好的项目怎么楚然就出幺蛾子了呢？奇怪的是项目执行npm run dev命令时，可正常运行，而pro版本跟dev的版本中差了一个optimize-css-assets-webpack-plugin这个文件的引用，所以在把webpack.prod.conf.js中的使用找到该文件引用处：首先将上述组件引用注释掉,然后执行npm run build,build成功，随后就很

uniapp引入vant2单独样式报错 Unclosed bracket ＞ 1 | .van-icon{position:relative；等等

m0_70632275的博客

11-20

291

看了一篇其他文章解决的，感觉很离谱但是却实现了。文件里里面搜索url，在url前面增加空格即可。2.找到vant里面的icon组件,在。有两个url，我都加了空格，然后就生效了。1.引入vant2后保存会报错。

uni-app引用vant组件 vant/lib/index.css编译报错

m0_53942074的博客

07-19

499

在main.js中把 .css改为 .less(如果没有安装less插件记得去插件市场安装一下)

uniapp 中引入vant组件和 vant 报错Unclosed bracket 的问题解决

weixin_44168929的博客

06-28

3669

在uniapp 中引入vant组件，遇到一个报错，所以在此记录一下完整过程。

HbuildX中uniapp引入vant出现的报错：Module build failed (from ./node_modules/postcss-loader/src/index.js)……

m0_51858205的博客

04-29

561

把你的vant文件夹下的icon文件夹里的index.wxss替换成如下内容即可。CSS 文件中有一个未闭合的括号。

uniapp 集成vant报错

小漠007的专栏

06-04

429

全文搜索：.woff，找多对应的文件，右键格式化后保存，重新允许就可以了。系统：mac os monterey 12.6。

解决uniapp项目中使用vant Weapp图标组件报错问题（Module build failed from ./node_modules/postcss-loader/src/index）