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

解决npm run build打包时的Unknowword错误
最新推荐文章于 2023-07-10 11:40:56 发布
转载 最新推荐文章于 2023-07-10 11:40:56 发布 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://www.jianshu.com/p/d3acdd09e058
文章标签：

#webpack #vue.js #css

当使用npm run build命令打包时遇到Unknowword错误，可以通过临时禁用OptimizeCSSPlugin来解决问题。首先在webpack.prod.conf文件中注释掉该插件，然后重新打包。成功后，在dist目录下查找问题CSS，发现是em标签样式引起的问题。修复样式表中的问题后，恢复插件注释并重新执行build，打包过程顺利完成。
在进行npm run build进行打包时出现报错: Unknow word
解决方案

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

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

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

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

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

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

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

webpack3提取vue css,详解webpack打包vue时提取css
weixin_34177886的博客
08-04 798
详解webpack打包vue时提取csswebpack打包vue项目的时候默认会把vue里的css打包到页面上。webpack.config.js里的plugins加上以下配置new webpack.LoaderOptionsPlugin({test:/\.vue$/,options: {vue: {loaders: {css: ExtractTextPlugin.extract({fallbac...
精选资源
vue2 + webpack5相适配的 能成功打包的 package.json 文件
08-25
vue2 项目 + webpack 打包工具，是一个非常经典的组合，但是在配置的过程中会老是出问题，例如：webpack、webpack-cli、vue-loader、vue-template-compiler、css-loader的版本的设定就是一个匹配的大问题；...
vue 项目打包报错 CSS minification error
StacyMo的博客
03-23 5220
vue 项目打包报错 Error: CSS minification error: Lexical error 错误： Error: CSS minification error: Lexical error on line 1: Unrecognized text. 使用下图写法导致打包出错： css 的错误，不能识别的文本 解决方案： scss中calc中的变量需要以 #{变量名} 的方式使用 ...
vue：webpack打包过程中的常见错误-加载CSS文件
NXBBC的博客
05-01 1658
module使用的常见问题
vue项目打包后css图片路径出错问题
qq_36476095的博客
09-10 783
vue项目打包后css图片路径出错问题 vue项目打包后出现白屏原因：第一种，打包后的dist目录下的文件引用路径不对，会因找不到文件而报错导致白屏。第二种：由于把路由模式mode设置成history了，默认是hash,即url地址带有# 第一种，打包后的dist目录下的文件引用路径不对，会因找不到文件而报错导致白屏。 解决办法：修改一下config下面的index.js中bulid模块导出的...
webpack 引入css 报错,webpack引入CSS的问题
weixin_39879881的博客
08-03 572
用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 1130
报错信息如下：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搭建的项目中，我们经常需要引入...
vue+webpack 打包文件 404 页面空白的解决方法
11-30
综上所述，解决Vue+Webpack打包后404页面空白的问题，主要涉及到服务器配置（如Nginx的try_files规则）、静态资源路径设置（通过Vue CLI的`publicPath`）以及Babel的正确配置（`.babelrc`文件）。通过调整这些配置，...
解决vue-cli webpack打包后加载资源的路径问题
12-10
vue项目，访问打包后的项目，输入路径后，页面加载空白。这时会有两类问题，都是路径问题。 1.一个是css,js,ico等文件加载不到，是目录里少了dist 打开页面时一片空白 解决办法： config/index.js文件的build->...
使用webpack打包发现css单行注释报错
小鱼尔呀
05-08 1677
手动创建了webpack项目，并引入了less,感觉一切正常，可是打包时发现居然报错： 解决办法 ： postcss.config.js文件中新增 parser:'postcss-scss'
Vue css 打包报错
bamboolm的博客
08-22 1392
Vue css样式错误 打包失败
vue2打包报错——error in css/app.b9045713.css（css/app.b9045713.css from Css Minimizer plugin）
weixin_44479794的博客
05-11 2009
使用vue2+elementUI写了一个门户网站，在打包时遇到一个报错error in css/app.b9045713.css，报错截图如下 一开始百度上找不到，交流群也问了个遍，都没有有效的解决方法， 以为是Css Minimizer plugin的问题，实际上和这个插件并没有关系，但是通过排除法猜测可能和css有关系，于是逐个页面排除css样式，终于发现了，原因是我在style里使用了“//”的方法进行注释，因为当时样式是网速复制下来的，就没在意。 虽然是因为我的粗心大意导致出现这个问题，不.
vue 运行时正常，打包却报错
huxihua2006的博客
07-10 1542
【代码】vue 运行时正常，打包却报错。
webpack中引入css报错的原因
weixin_38467833的博客
05-03 1489
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 737
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 9425
初学者在学习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 430
因为电脑更新，所以从新从公司的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）的插件，但在添加它之前需要确认几个步骤： 1. **兼容性检查**：确保你的webpack版本支持该插件，因为某些版本可能存在不兼容。 2. **正确配置**：在你的webpack配置文件(`config/index.js` 或 `vue.config.js`) 中，你需要正确地应用这个插件。通常会把它添加到output部分，并设置合适的压缩选项，例如`algorithm`, `test`等。 ```js const CompressionWebpackPlugin = require('compression-webpack-plugin'); module.exports = { //... optimization: { minimizer: [ new CompressionWebpackPlugin({ algorithm: 'gzip', // 压缩算法，默认为gzip test: /\.js$|\.html$|\.css$/, // 指定要压缩的文件类型 threshold: 10240, // 文件大小阈值，低于此值时不压缩 minRatio: 0.8, // 压缩比率低于此值时不压缩 }), ], }, }; ``` 3. **处理错误**：如果打包过程中报错，可能是由于其他依赖冲突、语法错误或者是配置文件解析问题。检查是否有语法错误，以及是否有其他模块与`compression-webpack-plugin`有冲突。 如果你已经按照上述步骤操作但仍出现问题，具体的错误信息将是非常重要的线索。常见的错误可能包括缺少必要的模块、路径问题或是对webpack的配置理解有误。建议你在错误日志中查找关键词，或者尝试在网上搜索相似错误以找到解决方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值