vue 项目打包报错 CSS minification error

已于 2022-03-23 11:48:09 修改
阅读量4.6k 收藏 1
点赞数 1
分类专栏： vue 前端 css 文章标签： vue scss
于 2022-03-23 11:44:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/StacyMo/article/details/123681983
版权
前端 同时被 3 个专栏收录
34 篇文章 0 订阅
订阅专栏
vue
18 篇文章 0 订阅
订阅专栏
css
8 篇文章 0 订阅
订阅专栏

vue 项目打包报错 Error: CSS minification error: Lexical error

  1. 错误： CSS minification error: Lexical error on line 1: Unrecognized text.
    在这里插入图片描述

  2. 使用下图写法导致打包出错： css 的错误，不能识别的文本
    在这里插入图片描述

  3. 解决方案：
    scss中calc中的变量需要以 #{变量名} 的方式使用
    在这里插入图片描述

杂草沫
关注
专栏目录
Vue项目报错：Uncaught SyntaxError: Unexpected token <
10-17
主要介绍了Vue项目报错：Uncaught SyntaxError: Unexpected token <，在引入第三方依赖的 JS 文件时，遇到的一个问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS minification error
zzaixiao的博客
07-21 7501
在vue-cli3中打包出现如下错误： CSS minification error: Lexical error on line 1: Unrecognized text 原因是scss中calc中的变量使用方式 需要以 #{变量名} 的方式使用 使用以上方式导致打包出错： css 的错误，不能识别的文本 解决方案：使用变量时以如下方式使用 参考：https://stackoverflow.com/questions/53147639/compilation-failure-when-making-
打包报错 CSS minification error: Lexical error on line 1: Unrecognized text.
pony君的博客
03-03 705
打包报错 CSS minification error: Lexical error on line 1: Unrecognized text.
Error:CSS minification error: Lexical error on line 1:Unrecognized text.Erroneous area:1:infinity*1b
最新发布
weixin_44522680的博客
08-14 352
1.判断是依赖问题而不是代码问题，删除依赖重新npm install，然后打包，没有解决。3.删除依赖cnpm install（网上看到帖子cnpm可以解决），没有解决。css 的错误，不能识别的文本：无限大×一个有限的数值=无限大所以报错。到node_modules该目录下的index.js里，注释到该代码。2.删除依赖yarn install，重新打包，没有解决。定位到抛出error的位置，注释掉代码，解决问题。改calc语法的这个解决方法无法解决。希望我的办法可以对你有帮助！也没有办法定位到该问题。
打包报错：CSS minification error: Lexical error on line 1: Unrecognized text.
qq_41400330的博客
12-28 1575
scss打包报错
vue-cli3中打包失败，CSS文件识别异常
今天bug有点多
04-13 2144
Error: CSS minification error: Lexical error on line 1: Unrecognized text. 原因是在 SCSS 中，calc 中变量的使用方式不正确 使用以上方式导致打包出错： css 的错误，不能识别的文本 正确使用方式应该为：#{ 变量名 } 再次打包，正常 ...
vue element 项目默认css文件 style
01-02
一个标准的Vue Element项目会有一个默认的CSS文件，通常命名为`styles`，这个文件用于存放全局样式或者项目的基础样式。`styles`文件一般位于`src`目录下，这是Vue项目的源代码根目录，包含组件、路由、公共样式、...
Vue项目打包编译优化方案
10-14
Vue 项目打包编译优化方案是为了提升项目的性能和加载速度，尤其对于大型或者复杂的 Vue 应用来说，优化显得尤为重要。以下是一些关键的优化措施： 1. **不生成.map文件**： .map 文件主要用于在开发环境中进行...
用Vue-cli搭建的项目中引入css报错的原因分析
08-29
Vue-cli项目中引入css报错的原因分析 在使用Vue-cli搭建项目时，遇到引入css文件报错的问题是非常常见的。本文将详细介绍这种问题的原因分析和解决方法。 问题描述 在使用Vue-cli搭建的项目中，我们经常需要引入...
Error: CSS minification error: Cannot read properties of undefined (reading ‘trim‘). File: static/cs
weixin_49826079的博客
12-08 1395
vue 项目打包报错Error: CSS minification error: Cannot read properties of undefined (reading 'trim'). File: static/cs
记录bugERROR Error: CSS minification error: Cannot read property ‘trim‘ of undefined. File: css/chunk
hsdsnd的博客
10-17 838
打包的时候出现的错误。ERROR Error: CSS minification error: Cannot read property 'trim' of undefined. File: css/chunk-220dffc9.a499111f.css Error: CSS minification error: Cannot read property 'trim' of undefined. File: css/chunk-220dffc9.a499111f.css
Error: CSS minification error: Lexical error on line 1: Unrecognized text.
少油少盐不要辣
02-27 5215
1.问题 今天，在我电脑上打包vue项目的时候，压缩css代码，出错了。如下： 2.分析 可是，有其他同事可以正常打包，node版本一样。找了好多方法，也没用。我就猜测，可能是依赖的问题。因为，在安装依赖的时候，安装node-sass，老是出错，一开始用yarn安装的，后来，改用了cnpm安装的。于是，我把node_modules删除了，用cnpm install重新安装。结果，令人感动，竟然成功了。因此，有了这篇博客。 3.结果 ...
记一次bug，Error: CSS minification error: Cannot read properties of undefined (reading ‘trim‘). File: cs
qq_32339317的博客
02-02 3728
记录一次bug
css引入报错,vue项目通过import引入外部css报错怎么办
weixin_42299873的博客
08-03 3674
vue项目通过import引入外部css报错的解决办法：首先在【webpack.config.js】中添加相关内容，添加后重新npm run dev；然后json文件中查看是否存在【css-loader】等数据，并安装即可。本教程操作环境：windows7系统、Vue2.9.6版，该方法适用于所有品牌电脑。vue项目通过import引入外部css报错的解决办法：vue 通过webpack-simp...
uniapp-bug记录
qq_40538396的博客
09-04 453
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):Error: Expected a pseudo-class or pseudo-element.
vue项目打包报错CSS minification error: Cannot read properties of undefined (reading 'length')
09-27
根据你提供的引用内容，报错"Cannot read property 'length' of undefined"可能是由于在Vue项目中尝试读取一个未定义的属性的长度导致的。这个错误通常发生在组件渲染过程中，当数据尚未返回时，组件试图读取该数据的长度属性。解决这个问题的一种方法是在渲染该组件之前，先通过条件判断确保数据已经返回。 对于你提到的具体解决方案，可以在包含报错代码的元素上添加一个条件判断，例如使用v-if指令，只有在数据已经返回时才渲染该元素。这样可以避免在数据尚未返回时访问未定义的属性。 下面是一个示例代码片段，展示了如何使用v-if进行条件渲染来解决这个问题： ```html <div class="main" v-if="book.items"> <div class="img-list" v-for="list in book.items.length > 5 ? book.items.slice(1, 4) : book.items" v-bind:key="list.id"> <div class="new-img"> <img :src="imageUrl(list)" alt=""> <h1 class="title">{{ list.title }}</h1> </div> </div> </div> ``` 在上述代码中，我们使用了v-if指令来判断`book.items`是否已经定义，只有当`book.items`有值时才会渲染整个`<div class="main">`元素及其子元素。这样可以确保在数据返回之前不会访问到未定义的属性。 以上是解决报错"Cannot read property 'length' of undefined"的一种方法。希望这能帮助到你！如果还有其他问题，请随时提出。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值