vue中main.js导入全局css文件失败原因

最新推荐文章于 2023-05-16 13:51:47 发布
最新推荐文章于 2023-05-16 13:51:47 发布
阅读量3k 收藏 1
点赞数 1
文章标签： vue.js javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45477985/article/details/123423429
版权

标题就说明了我的问题
当时公司想要更换前端框架，使用另外一个前端部门的vue-touch框架，想要将项目迁移
任务分配了给我，我将代码迁移后发现，main.js中引用的css文件，全部失效，导致整个登录页乱成了一锅粥；
在这里插入图片描述
我左思右想没有发现出问题，知道现在我才发现，这个框架多了一个小小的插件
在这里插入图片描述
这个postcss插件才是罪魁祸首
把他里面的内容删除后，发现css能够正常编译了，新框架还是得熟悉熟悉才能入手使用啊。

爸爸爱你呦
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue自定义全局css样式loading组件.zip
04-16
vue自定义全局css样式loading组件，1、不用gif图片，直接用css样式实现进度条效果 2、用js文件将组件vue进行封装，封装两个全局方便，打开和关闭 3、main.js引用定义的js文件，实现全局引用
vue添加css无效果？
weixin_43240623的博客
01-22 511
1.权重不够 加!important 2.把scoped去掉，它仅在当前页面生效，有一些公共样式就因为scoped所以无效，记得取唯一类名
POI导入Excel并返回校验后的错误文件（原样）下载以及校验错误信息，同时加进度条
01-22
POI导入Excel并返回校验后的错误文件（原样数据文件，并添加批注，注：由于批注只能加1000条，会在Excel后面添加一栏错误信息）下载以及页面展示校验错误信息，同时添加导入进度条，提供页面js和css代码，后端controller和service,提供xml模板和Excel模板，由于项目导入地方较多，编写的是公共代码，供多处调用。（注：解析xlsx文档出错，已在前端页面js控制，项目紧，后期优化）
js、css等文件引入空白问题
m0_38003213的博客
05-05 1750
路径没错，不管路径怎么改变，js、css等文件就是引入失败。很多时候是因为Spring的过滤器把js、css等资源文件拦截了。default是tomcat配置的一个servlet，“DefaultServlet被定义在$CATALINA_HOME/conf/web.xml中，配置文件中被定义的东西会在Tomcat启动的时候 被加载。解决办法1：在web.xml文件中加入如下代码：       
jsp引入css失败,jsp加载css失败的原因
weixin_34450111的博客
08-03 3248
jsp加载css失败的原因：1、css文件语法写错；2、css文件编码出错；3、加载css文件路径不对；4、设置了过滤器；其解决办法：1、检查css语法；2、将css文件保存为UTF8格式；3、设置正确的css路径等。本教程操作环境：windows7系统、css3版，该方法适用于所有品牌电脑。推荐：《css视频教程》jsp加载css失败的原因有？可能的原因有：css文件语法写错css文件编码出错加...
Vue中的main.js文件引入css文件发生错误
weixin_44535441的博客
10-06 1621
源代码： import Vue from 'vue' import App from './App.vue' import './assets/css/reset' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') 错误截图 找了网上很多帖子，并不能解决问题，最后的解决办法是在引入文件后面加.css后缀 如下--- import Vue from 'vue' ..
Vue的main.js引入vue全局失效
qq_43267023的博客
08-11 1481
Vue的main.js引入vue全局失效
【vue2】main.js引入scss文件报错
胡图图的博客
03-04 460
main.js引入scss文件报错，找不到文件
vue-cli main.js引入.scss文件报错的原因
qq_42148925的博客
08-30 763
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router ...
组件引入失败/vue小白踩坑记
evennight的博客
04-04 332
百度说是和H5的新标签重名了，真的很无语我找了半个小时，原来是这个问题，这也侧面证明了实时看控制台报错非常重要，不要老怀疑自己。刚开始以为是自己的引入方式有问题，我使用的是局部引入的方式,mask组件引入到home里面。后来看footer组件能用同样的方式引入成功，控制台报以下错误。开始没有看控制台，就一直各种百度找问题。
Vue Pivottable-基于jQuery的PivotTable.js的Vue端口-Vue.js开发
05-27
cd vue-pivottable / demo / example-vue-cli3 / $ npm install $ npm run serve安装npm i vue-pivottable全局组件用法main.js从“ vue”导入Vue从“ vue-pivottable”导入VuePivottable导入“ vue-pivottable / ...
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
01-18
当你想要在vue项目的一个组件中使用全局样式文件中定义好的变量，此时只在main.js中import是不行的。 目录结构如下： 即在MHeader.vue中想要使用src下的less下的variables.less文件中定义好的变量。 此时，只用...
vue如何引入sass全局变量
12-12
sass或者less都提供变量设置，在需求切换主题的项目中使用less或者sass变量，只要修改变量值，编译后所有用到该变量的样式都会被修改为你想要的效果，但是在vue-cli搭建的项目中，在main.js中全局引入一个scss文件，...
Vue2.0设置全局样式(less/sass和css)
01-21
第一步：在src目录下的main.js,也就是入口文件里面添加下面代码 require('!style-loader!css-loader!less-loader!./common/less/index.less') 在Vue1.0版本中可以这样写，但是2.0版本中就不行，会报错提示解析错误 ...
(javascript)vue项目打包后，写的覆盖element的样式无效了。这是什么原因？
学习笔记666
08-20 9308
问题： (javascript)vue项目打包后，写的覆盖element的样式无效了。这是什么原因？描述: 在开发模式模式下，写的覆盖样式都有效，打包后就无效，请问下是什么原因? main.js里的css加载顺序 开发模式下 打包后在浏览器查看 解决方案1: 你的问题就是css权重问题 如果相同权重可能存在引入顺序问题 简单粗暴解决办法  1： 如果是单页面 写入index.htm...
【vue项目部署CSS失效】VUE部署后css样式加载无效和失效多种情况解决方案
赏樱看雪撸代码
12-01 1万+
vue项目部署CSS失效，css样式加载无效，nginx部署css失效，css文件404，服务器样式失效 部署项目css失效
vue3.0项目中全局注入scss样式不生效原因
XUELINGMM的博客
05-16 3362
原来这不是一个bug，只有在main.js引入一个其他scss文件或者在.vue文件中使用，并且里面有内容（猜测因为配置文件是在每个 vue 文件单独引入的原因），则 scss.additionalData 配置的全局scss文件就可以正确引入了
vue填坑系列之在main.js中引入相应的js插件不生效
xuxinwen32的博客
03-04 8998
需求：在main.js中引入相应的js插件不生效； 原因：相应的插件没有将模块export default； 解决方案：所以比较好的办法是在index.html渲染静态页面的时候直接用script标签的形式引入； ...
解决Vue在main.js全局引入scss文件，组件里使用scss变量报错问题
热门推荐
qq_40532145的博客
09-09 2万+
报错：Syntax Error: SassError: Undefined variable. 我一开始的引入方式是这样的： 以为在main.js全局引入了就一劳永逸，写着常规css样式时还好好的，用到scss变量时就报错了。· 解决方法一 在需要用到的 .vue 文件里单独引用 variable.scss 变量文件，but达不到我们想要的“一劳永逸“效果 可能还会有奇奇怪怪的潜在问题，建议使用方法二。 · 解决方法二 配置vue.config.js文件，使得全局都能使用sc...
vue3的main.js
最新发布
07-27
引用\[1\]中提供了一个配置Vue3项目的main.js的示例代码。在这个示例中，首先需要安装Element Plus的图标库，然后在main.js中引入并配置这些图标。接下来，需要安装Vue Router和Vuex，并在main.js中引入和配置它们。最后，使用createApp函数创建Vue实例，并通过use方法挂载路由、状态管理和Element Plus插件。 引用\[2\]中提供了一个关于配置Vue3项目的main.js的顺序和注意事项。在这个示例中，首先需要按照顺序依次引入和配置路由、状态管理和Element Plus插件。注意，顺序不能乱，否则可能会导致报错。 根据以上引用内容，可以得出Vue3的main.js配置的步骤如下： 1. 安装Element Plus的图标库：npm install @element-plus/icons-vue 2. 在main.js中引入并配置Element Plus的图标库，示例代码如下： ```javascript import * as ElementPlusIconsVue from '@element-plus/icons-vue' const app = createApp(App) for (const \[key, component\] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) } ``` 3. 安装Vue Router：npm install vue-router@4 4. 安装Vuex：npm install vuex@next --save 5. 在main.js中引入并配置Vue Router和Vuex，示例代码如下： ```javascript import { createApp } from 'vue' import App from './App.vue' import router from './router/index' import store from './store/index' const app = createApp(App) app.use(router).use(store) ``` 6. 引入并配置Element Plus插件，示例代码如下： ```javascript import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' app.use(ElementPlus) ``` 7. 最后，使用mount方法将Vue实例挂载到DOM元素上，示例代码如下： ```javascript app.mount('#app') ``` 请注意，以上步骤仅为示例，实际配置可能会根据项目需求有所不同。 #### 引用[.reference_title] - *1* *2* [Vue3创建项目(四)main.js配置，避坑指南](https://blog.csdn.net/zhangxueyou2223/article/details/128144109)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [vue3在main.js里面定义全局函数，然后其他页面使用](https://blog.csdn.net/qq_33769914/article/details/126101917)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值