Vue项目进行webpack打包时出现css报错

最新推荐文章于 2024-05-03 20:40:07 发布
最新推荐文章于 2024-05-03 20:40:07 发布
阅读量1.4k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Vue 文章标签： webpack vue.js css
原文链接：https://www.jianshu.com/p/d3acdd09e058
当使用npm run build命令打包时遇到Unknowword错误，可以通过临时禁用OptimizeCSSPlugin来解决问题。首先在webpack.prod.conf文件中注释掉该插件，然后重新打包。成功后，在dist目录下查找问题CSS，发现是em标签样式引起的问题。修复样式表中的问题后，恢复插件注释并重新执行build，打包过程顺利完成。

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

在进行npm run build进行打包时出现报错: Unknow word
解决方案

暂时注释掉OptimizeCSSPlugin相关配置，等待问题解决后恢复。

1.找到build/webpack.prod.conf文件，注释掉此plugin

在这里插入图片描述
2.再次打包：npm run build

在这里插入图片描述
此时打包成功

3.在生成的dist中查找出现问题的css，定位到具体样式
在这里插入图片描述
此时发现是em标签出现问题，根据上下样式查找出原样式表的相应位置及属性

4.查找样式表问题的对应位置并进行修改

在这里插入图片描述
5.更改后放开插件注释并重新build

vue 项目打包报错 CSS minification error
StacyMo的博客
03-23 5122
vue 项目打包报错 Error: CSS minification error: Lexical error 错误： Error: CSS minification error: Lexical error on line 1: Unrecognized text. 使用下图写法导致打包出错： css 的错误，不能识别的文本 解决方案： scss中calc中的变量需要以 #{变量名} 的方式使用 ...
webpack3提取vue css,详解webpack打包vue时提取css
weixin_34177886的博客
08-04 777
详解webpack打包vue时提取csswebpack打包vue项目的时候默认会把vue里的css打包到页面上。webpack.config.js里的plugins加上以下配置new webpack.LoaderOptionsPlugin({test:/\.vue$/,options: {vue: {loaders: {css: ExtractTextPlugin.extract({fallbac...
vue：webpack打包过程中的常见错误-加载CSS文件
NXBBC的博客
05-01 1563
module使用的常见问题
vue项目打包后css图片路径出错问题
qq_36476095的博客
09-10 769
vue项目打包后css图片路径出错问题 vue项目打包后出现白屏原因：第一种，打包后的dist目录下的文件引用路径不对，会因找不到文件而报错导致白屏。第二种：由于把路由模式mode设置成history了，默认是hash,即url地址带有# 第一种，打包后的dist目录下的文件引用路径不对，会因找不到文件而报错导致白屏。 解决办法：修改一下config下面的index.js中bulid模块导出的...
webpack 引入css 报错,webpack引入CSS的问题
weixin_39879881的博客
08-03 560
用vue-cli生成的项目，再其APP.VUE中引入bootstrap import './assets/css/bootstrap.css报错，如下This relative module was not found:* ./assets/css/bootstrap.css in ./~/.6.4.1@babel-loader/lib!./~/.11.1.4@vue-loader/lib/se...
在vue项目中使用webpack打包运行npm run build时出现css-loader版本不兼容报错。
weixin_38422287的博客
03-15 1112
报错信息如下：Syntax Error: ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'minimize'. ...
用Vue-cli搭建的项目中引入css报错的原因分析
08-29
Vue-cli项目中引入css报错的原因分析 在使用Vue-cli搭建项目时，遇到引入css文件报错的问题是非常常见的。本文将详细介绍这种问题的原因分析和解决方法。 问题描述 在使用Vue-cli搭建的项目中，我们经常需要引入...
vue2 + webpack5相适配的 能成功打包的 package.json 文件
08-25
vue2 项目 + webpack 打包工具，是一个非常经典的组合，但是在配置的过程中会老是出问题，例如：webpack、webpack-cli、vue-loader、vue-template-compiler、css-loader的版本的设定就是一个匹配的大问题；...
vue+webpack 打包文件 404 页面空白的解决方法
11-30
综上所述，解决Vue+Webpack打包后404页面空白的问题，主要涉及到服务器配置（如Nginx的try_files规则）、静态资源路径设置（通过Vue CLI的`publicPath`）以及Babel的正确配置（`.babelrc`文件）。通过调整这些配置，...
vue2项目webpack3.x打包文件分割优化加载
Guoye的专栏
05-03 2384
本文使用 3 种方案进行叠加优化，有 gzip、懒加载、拆分 vendor 和 app 体积
使用webpack打包发现css单行注释报错
小鱼尔呀
05-08 1657
手动创建了webpack项目，并引入了less,感觉一切正常，可是打包时发现居然报错： 解决办法 ： postcss.config.js文件中新增 parser:'postcss-scss'
Vue css 打包报错
bamboolm的博客
08-22 1360
Vue css样式错误 打包失败
vue2打包报错——error in css/app.b9045713.css（css/app.b9045713.css from Css Minimizer plugin）
weixin_44479794的博客
05-11 1943
使用vue2+elementUI写了一个门户网站，在打包时遇到一个报错error in css/app.b9045713.css，报错截图如下 一开始百度上找不到，交流群也问了个遍，都没有有效的解决方法， 以为是Css Minimizer plugin的问题，实际上和这个插件并没有关系，但是通过排除法猜测可能和css有关系，于是逐个页面排除css样式，终于发现了，原因是我在style里使用了“//”的方法进行注释，因为当时样式是网速复制下来的，就没在意。 虽然是因为我的粗心大意导致出现这个问题，不.
vue 运行时正常，打包却报错
huxihua2006的博客
07-10 1503
【代码】vue 运行时正常，打包却报错。
webpack中引入css报错的原因
weixin_38467833的博客
05-03 1472
webpack中引入css报错的原因webpack版本号2.4.1 引入css npm install css-loader style-loader js引入css部分 require(“!style!css!./style.css”); cmd报错信息 ERROR in ./style.css Module parse failed: C:\webpack\app\sty
vue开发中，build时css打包报错
weixin_30834783的博客
07-07 711
vue在打包的时候css报错，首先声明的这个并没有解决webpack本身的问题，本来这个也是一个警示，不会影响代码正常运行 这个是因为我在多个页面引入了同一个css文件，webpack打包时候对css文件顺序报错，如果css少，可以稍微改动下css文件顺序即可，但是当很多文件引入的时候，就没法一个个改了，解决办法是在build的文件中加入 转载于:https://www.cnblogs.c...
webpack打包css报错（已解决）：UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function
Coder小何
09-09 9383
初学者在学习webpack中容易踩一个版本过高的坑 这是我在使用webpack打包css时，出现的一个错误，导致css无法打包 原因是 css-loader 和 style-loader 版本过高 解决方法：这是我原来的package.json的版本信息 现在我手动下调了一下版本 "css-loader": "^3.3.0", "style-loader": "^1.0.0" 然后再命令行中 依次输入： npm install npm dev 重新安装项目依赖，然后再次使用webpack
build vue 指定版本_利用vue打包时候出现的CssSyntaxError
weixin_36361447的博客
12-12 417
因为电脑更新，所以从新从公司的github上下载了仓库，前几天npm start了一下，完全没有什么问题，所以也没有多想，但是今天需要build好上线一个修改的小问题，结果在我执行npm run-script build 的时候，竟然出现了error的事情,错误的大概内容就是：“UnhandledPromiseRejectionWarning: CssSyntaxError:”,感觉问题应该不大，...
vue安装compression-webpack-plugin后打包报错
最新发布
08-28
在Vue项目中安装`compression-webpack-plugin`插件后，可能会遇到打包时报错的情况。`compression-webpack-plugin`是一个用于压缩Webpack构建产出的静态资源（如CSS、JS）的插件，但在添加它之前需要确认几个步骤： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值