elementUI在vue中使用时css样式不生效

最新推荐文章于 2024-04-15 17:55:26 发布
最新推荐文章于 2024-04-15 17:55:26 发布
阅读量1.3k 收藏 1
点赞数 1
分类专栏： 前端 vue element-ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43238931/article/details/119240864
版权
前端 同时被 3 个专栏收录
21 篇文章 1 订阅
订阅专栏
vue
13 篇文章 1 订阅
订阅专栏
element-ui
7 篇文章 0 订阅
订阅专栏
根据官方提示先是使用npm i element-ui -S对element-ui进行了安装，并按照官方提示对整个Element进行引入，但在测试element-ui中淡入淡出动画时发现按照官方写法无法出现正确的结果：

在这里插入图片描述

可以看到，图中的按钮样式不对，而且点击按钮后也没有出现内置过渡动画
冲洗阅读文档后发现了这么一段话：

在这里插入图片描述

这说明在我使用npm i element-ui -S时只是引入了js文件，而css文件需要单独引入
解决办法：找到项目的index.html文件，通过CDN的方式引入css文件

在这里插入图片描述

引入后实验项目样式和动画都能够正确显示
昵称已存在lxttttt
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)
03-01
【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)cv可用 【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)cv可用 【vue+leaflet+elementUI】vue项目中在...
vue-cli设置css不生效的解决方法
01-19
我们有的项目使用的是老的vue-cli脚手架生成的，今天想写点东西，发现.vue文件里面 style 里面写的样式都不生效了，很自然就想到是不是loader的问题。 在这种项目的webpack.base.config.js一般设置loader的 rules: ...
Vue打包部署到Nginx时,css样式不生效的解决方式
10-15
主要介绍了Vue打包部署到Nginx时,css样式不生效的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue+elementui 项目打包后样式变化改变问题
qq_35501764的博客
08-27 528
main.js中的引入顺序决定了打包后css的顺序，组件内的样式没有生效可能是被第三方组件样式覆盖了，所以把第三方组件放在前面引入，router放在后面引入，
Vue 设置CSS样式不起作用解决
最新发布
weixin_58853115的博客
04-15 192
经过debug返现是样式没起作用。Vue设计代码，但是设置CSS样式不起作用。更改后，输入添加了边框。
解决Element UI的el-dialog弹窗打开时css的显示BUG
GhostUncledrew-blogs
04-08 631
*在使用el-dialog弹窗时 body的内联样式默认会有padding-right: 5px <style lang="less" scoped> // .el-popup-parent--hiddren body{ padding-right: 0 !important; } </style>
ElementUI自定义CSS样式不生效的解决方案
热门推荐
诗水人间
09-02 14万+
例如有一个输入框 <el-input ref="mySearch" class="mySearch" size="small" placeholder="请输入内容" suffix-icon="el-icon-search" v-model="input1"> </el-input> 如果没有加自定义样式则输入框大概是这样的 我希望是这样的 通过谷歌浏览器的开发者工具，找到对应样
elementui 加css不起作用
滕青山博客
01-18 546
问题 elementui 加css不起作用 加了deep和!important，但是自己加的css还是没效果。 解决 使用<style scoped lang="scss">替换<style>后就可以了
在element组件中自定义组件的样式不生效问题（vue scoped scss无效问题）
二三的博客
09-14 5756
当我们在项目中需要给element组件加上一些自定义样式的时候，往往是不生效的。这是因为Vue项目中使用第三方框架的时候，Vue中有scoped，声明了样式是在组件范围内生效的，避免了不同组件的样式污染。 解决方法 1. 去掉scoped 这种方法确实可以实现效果，简单粗暴，却会造成不同组件样式污染，不建议。 2. 使用 /deep/ 深度修改标签样式 找到需要修改的 element标签的类名，然后在类名钱加上 /deep/ ，可以强制修改默认样式。这种方式可以直接用到有 scoped 属性的 sty.
记一次vue elementUI css无效不渲染的巨坑
xyphf的博客
08-26 1208
先说解决方法，nginx加上 include mime.types; default_type application/octet-stream; 问题是这样的，我遇到一个问题，在main.js里面引入了 import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' 而且本地可以正常运行，构建出的dist目录也能正常运行，发布到NodeJS服务也能正常运行，唯独 让后端发布dist目录...
解决Vue打包上线之后部分CSS不生效的问题
12-13
首先注释掉webpack.prod.conf.js中下面的代码 new OptimizeCSSPlugin({ ...然后在utils.js中添加， minimize:true const cssLoader = { loader: 'css-loader', options: { sourceMap: options.sourceMap, mini
修改element.style{}内容生效，但是代码内css无效
weixin_54515240的博客
09-02 544
css 样式失效
解决VUE引用element不能显现组件css样式问题
qq_45864822的博客
06-23 2242
1.码友们在用element开发时可能会发现不能够显现原本element样式问题，这时候就要检查一下自己有没有在main.js中导入import'element-ui/lib/theme-chalk/index.css' 。导入进去问题就能解决啦
vue-cli项目 ElementUI样式丢失
AbyssQ3Q的博客
09-30 2149
vue-cli 3/4 引入ElementUI后 样式丢失 使用vue-cli快速创建项目后，引入element，element元素是有了，但是样式莫名其妙丢失了 网上有说是因为node和npm的版本不匹配导致的，于是卸载了node然后清空了npm的所有文件，重新安装还是没用 然后看见了vue.config.js这个配置文件里有css相关的配置，觉得会不会是这个导致的 // css相关配置 css: { // 是否使用css分离插件 ExtractTextPlugin ext
Vue引入插件Element-ui 样式不生效
年少青山的博客
10-30 5902
import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ .
elementui样式不生效问题
lilikk1314的博客
09-18 1698
//下载elementui npm i element-ui -S // 在main.js 中引入 Element import ElementUI from 'element-ui' // 在main.js 引入 Element 样式 import 'element-ui/lib/theme-chalk/index.css' // 将 Element 挂载为 Vue 的插件 Vue.use(ElementUI); 下载elementui,在main.js中引入js和css样式 挂载为vue的.
使用element是不是不用写css,ElementUI自定义CSS样式不生效的解决方案
weixin_39600885的博客
08-04 557
例如有一个输入框ref="mySearch"class="mySearch"size="small"placeholder="请输入内容"suffix-icon="el-icon-search"v-model="input1">如果没有加自定义样式则输入框大概是这样的我希望是这样的通过谷歌浏览器的开发者工具，找到对应样式的类名为.el-input__inner但发现再html中前面的el-i...
vue + element-ui 组件样式缺失导致没有效果
beijihukk的博客
02-26 5059
使用element-ui的标签完成了package.json中的依赖添加以及elment-ui组件引入后，使用标签的却没有达到预期效果，比如一个普通按钮 <el-button type="primary" >主要按钮</el-button> 期望是这样的 但实际是这样的 这是因为忘了添加css样式，element-ui有提供样式，只要引入即可: im...
vue3引入elementui-plus不生效
06-13
可能是因为您没有正确引入 Element Plus 的样式文件。在 Vue 3 中，Element Plus 的样式需要单独引入。您可以在 main.js 文件中引入 Element Plus 的样式： ```javascript import 'element-plus/lib/theme-chalk/index.css'; ``` 确保您已经安装 Element Plus，并且这行代码在引入 Element Plus 组件之前。如果问题仍然存在，您可以检查一下是否正确安装了 Element Plus，并且在组件中使用了正确的标签名。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值