vue中写html样式出错,vue引入css打包出错的问题

最新推荐文章于 2024-05-16 11:19:02 发布
最新推荐文章于 2024-05-16 11:19:02 发布
阅读量450 收藏
点赞数
文章标签： vue中写html样式出错

我在main.js引用的时候import "mui.min.css";，npm run dev是没有问题的，但是npm run build 就报错

ERROR in ./~/css-loader?{"minimize":true,"sourceMap":true}!./src/assets/css/mui.min.css

Module build failed:

@ ./~/css-loader?{"minimize":true,"sourceMap":true}!./src/assets/css/common.css 3:10-117

@ ./src/assets/css/common.css

@ ./src/module/index/index.js

ERROR in ./src/assets/css/common.css

Module build failed: ModuleBuildError: Module build failed:

at runLoaders (/Users/century/vue/dingDong/node_modules/webpack/lib/NormalModule.js:192:19)

at /Users/century/vue/dingDong/node_modules/loader-runner/lib/LoaderRunner.js:364:11

at /Users/century/vue/dingDong/node_modules/loader-runner/lib/LoaderRunner.js:230:18

at context.callback (/Users/century/vue/dingDong/node_modules/loader-runner/lib/LoaderRunner.js:111:13)

at Object. (/Users/century/vue/dingDong/node_modules/css-loader/lib/loader.js:49:18)

at /Users/century/vue/dingDong/node_modules/css-loader/lib/processCss.js:230:4

at

at runMicrotasksCallback (internal/process/next_tick.js:86:5)

at _combinedTickCallback (internal/process/next_tick.js:95:7)

at process._tickCallback (internal/process/next_tick.js:161:9)

凡一一
关注
vue打包后css路径_Vue打包后访问静态资源路径问题
weixin_30475939的博客
01-13 2531
Vue打包后访问静态资源路径问题Vue介绍中static文件夹里放的是静态资源目录，如图片、字体等。我们发现运行npm run start后本地图片路径是没问题的，但是打包上传后会怎么样呢？我们知道，执行npm run build 后会生成dist文件夹，把里面的index.html在浏览器运行会发现图片路径出错啦！！！解决方法：1.先找到config下的index.js文件把最后的'/' 改为 ...
部署项目的问题（一）—— vue工程打包上线样式错乱问题
Stephy_Yy
12-05 1734
1、 打开index.html一片空白 参考：链接: link. 修改build对象里的assetsPublicPath为’./’ assetsPublicPath: './' 2、ElementUI样式丢失 参考：链接: link. 这里尝试完前三种： 1.main.js样式引入顺序问题 调整了import的顺序（可能是被第三方组件样式覆盖了，router放在最后引入，就可以实现组件样式在第三...
vue 项目打包时样式及背景图片路径找不到的解决方式
10-16
今天小编就为大家分享一篇vue 项目打包时样式及背景图片路径找不到的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue项目中打包编译后，CSS样式【-webkit-box-orient: vertical】打包后丢失问题
10-08 708
最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性，本地跑项目没问题，但是打包放到服务器后发现这个属性丢失了。如下图： 后来在网上查了一下，发现可能是optimize-css-assets-webpack-plugin这个插件的问题，导致打包时这个属性和注释混在了一起（个人猜测）,其实解决办法很简单，只需要在这...
使用vue-cli 引入bootstrap.min.css文件报错
weixin_30734435的博客
04-23 345
可以在index.html 里面引入boostrap.min.css文件 将bootstrap.min.css文件放置于static/css/文件夹中 然后再index.html文件中引入便可 <link rel="stylesheet" href="./static/css/bootstrap.min.css"> 转载于:https://www.cnblogs.com/Main...
vue2打包报错——error in css/app.b9045713.css（css/app.b9045713.css from Css Minimizer plugin）
weixin_44479794的博客
05-11 1686
使用vue2+elementUI写了一个门户网站，在打包时遇到一个报错error in css/app.b9045713.css，报错截图如下 一开始百度上找不到，交流群也问了个遍，都没有有效的解决方法， 以为是Css Minimizer plugin的问题，实际上和这个插件并没有关系，但是通过排除法猜测可能和css有关系，于是逐个页面排除css样式，终于发现了，原因是我在style里使用了“//”的方法进行注释，因为当时样式是网速复制下来的，就没在意。 虽然是因为我的粗心大意导致出现这个问题，不.
vue引入外部.css文件，webpack将其与.vue中的样式混合打包了，怎么办？
weixin_30332241的博客
01-22 461
我使用vue-cli搭自己的博客，希望引入公共样式： // main.js import './assets/styles/common.css' 我本来是希望webpack打包后，能将这个样式独立打包，在生成的html文件中用<link href='/static/css/common.css'>这样的形式引入，这样浏览器就能缓存，各个页面需要的话就import一下，也不用...
vue-cli3.0 脚手架 项目打包后，运行在服务器上，出现样式错乱的问题解决解决
jiajinning的博客
08-27 3975
vue-cli3.0 脚手架 项目打包后，运行在服务器上，出现样式错乱的问题解决解决 在使用vue-cli3.0 脚手架开发项目过程中，因为使用别人的框架开发的，在项目打包上线后，发现前台样式错乱问题，经过一顿好找，终于解决了问题了！ vue 单文件 样式引入问题 在vue单文件中，可以几种方式编写： <style lang="less" scoped>编写样式文件</s...
VUE项目初建和常见问题总结
10-16
在项目开发过程中，可能会遇到样式重置的问题，可以使用`reset.css`库，通过`npm install reset.css --save`安装，并在`main.js`中引入和使用。 对于跨域问题，Vue CLI 提供了一个解决方案，即在`vue.config.js`中...
vue3 + webpack打包单个vue组件并发布到npm时出现的问题及用rollup、vite进行打包对比
qq_45604163的博客
02-11 2098
webpack对vue组件打包，和rollup、vite的打包进行对比，分析问题
vue项目打包之后背景样式丢失的解决方案
10-17
今天小编就为大家分享一篇关于vue项目打包之后背景样式丢失的解决方案，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
详解Vue+elementUI build打包部署后字体图标丢失问题
10-15
主要介绍了详解Vue+elementUI build打包部署后字体图标丢失问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue3+vite项目打包后css样式丢失
m0_66879773的博客
03-13 2877
可以禁用 CSS 代码分割，这样 CSS 样式将会内联到 JavaScript 中，而不是被提取到单独的 CSS 文件中。这种方式可以解决一些样式丢失的问题，因为样式将直接包含在构建后的 JavaScript 文件中，而不会受到代码分割的影响。默认情况下启用了 CSS 代码分割，CSS 样式会被提取到单独的 CSS 文件中，会导致一些样式丢失的情况。在vite.config.ts文件中加入 cssCodeSplit: false,
webpack5打包报错：CssSyntaxError(1:1) xxx Unknown word import api from xxx ； import content from xxx
qq_45327886的博客
03-17 4519
unknown word webpack打包scss文件报错 import api from xxx,import content from xxx
Vue项目用build打包，dist打开页面空白+Css样式混乱的坑，解决方法
baluo8339的博客
07-02 1608
前言： 在Vue项目开发中，或多或少都踩过build 打包的坑，这里针对build打包后，需要查看dist页面出现空白，和后续css样式出现混乱的最快解决方法！！ 正文： 　　　项目完成后，开始打包，不多说，直接 npm run build 命令，回车。 　　　（注：前提是你需要安装 node.js环境,否则无法运行，不懂自行Google。） 　　 在 build 打包...
vue 不生效 打包 样式_Vue打包部署到Nginx时,css样式不生效的解决方式
weixin_42510182的博客
12-23 1147
今天在将使用Vue-cli编写的前端项目部署到Nginx的时候发生了一件很困扰的问题：Vue-cli项目在本地 使用 npm run dev的时候，页面样式是可以正常加载出来的，但是我将Vue-cli项目通过npm run build 打包生成的 dist 目录部署到Nginx之后，通过访问是无法加载出来样式的。于是乎，在网上开始寻找资料，发现大部分前辈的解决方案都是在，config的文件夹中的i...
vue-cli项目打包后样式空白（或者是样式出现一部分）_vue3 构建后部分样式丢失,重新构建后出现(1)
2401_84433974的博客
05-16 393
什么是MVVM？mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？组件之间的传值？Vue 双向绑定原理描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？虚拟 DOM 实现原理Vue 中 key 值的作用？Vue 的生命周期Vue 组件间通信有哪些方式?vue 中怎么重置 data?组件中写 name 选项有什么作用？Vue 的 nextTick 的原理是什么？Vuex 有哪几种属性?解决：到config文件夹中打开index.js文件。
vue-cli项目打包后样式空白（或者是样式出现一部分）_vue3 构建后部分样式丢失,重新构建后出现
最新发布
2401_84434086的博客
05-16 524
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。很多人踩这个坑的时候花了很多时间，网上的教程基本上都是说的第一个坑，这个坑很少有人提起。这个坑是当你使用了路由之后，
vue打包上线部分css效果错乱,解决Vue打包上线之后部分CSS不生效的问题
weixin_29358723的博客
08-03 2630
解决Vue打包上线之后部分CSS不生效的问题首先注释掉webpack.prod.conf.js中下面的代码new OptimizeCSSPlugin({cssProcessorOptions: config.build.productionSourceMap? { safe: true, map: { inline: false } }: { safe: true }}),然后在utils.js中...
如何在vue文件中引入css样式，写一份示例代码
04-19
你好，关于你的问题，以下是示例代码： 在vue组件中引入样式的方式有两种： 1. 使用import导入样式文件 在.vue文件中，可以使用import语句导入CSS文件，然后在<style>标记中使用这些样式。代码如下： <template> <div class="my-component"> <h1>Hello World</h1> </div> </template> <script> import styles from './styles.css' export default { name: 'MyComponent' } </script> <style> .my-component { background-color: #fff; color: #333; } /* import的样式 */ ${styles} </style> 2. 直接在<style>标记中编写CSS样式 你也可以直接在vue组件的<style>标记中编写CSS样式，如下所示： <template> <div class="my-component"> <h1>Hello World</h1> </div> </template> <script> export default { name: 'MyComponent' } </script> <style> .my-component { background-color: #fff; color: #333; } </style> 以上是关于在vue组件中引入CSS样式的示例代码，希望能够解答你的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值