关于 Element-UI 不生效 CSS样式不生效问题

No_007777777

已于 2022-07-04 16:45:53 修改

阅读量3.7k

点赞数 1

分类专栏： Web 文章标签： web elementui vue

于 2021-05-20 10:42:17 首次发布

本文链接：https://blog.csdn.net/weixin_42648006/article/details/117066349

版权

Web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、未单独引入css文件

在main.js中单独引入一下文件

import 'element-ui/lib/theme-chalk/index.css';

2、vue.config.js配置错误

将以下属性设置成了false，去掉文件名中的 .module

默认值为true，注释即可

// requireModuleExtension: false,

启用该属性后，会转译第三方依赖，导致部分插件和js无法导入

// transpileDependencies: true

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

No_007777777

关注关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue-cli脚手架项目引入Element-Ui不生效问题

weixin_43403746的博客

09-27

2121

背景：已经很久没有初始化项目了，今天在初始化项目引入element-ui插件时发现居然没有生效，最直观的就是没有标签提示。我是通过npm安装element-ui。 npm i element-ui -S 然后在main.js文件中引入了安装好的element-ui并使用。但使用时并没有标签提示，而且效果也没有出来。解决方案：查了后才发现，除了要引入element-ui外，还需要引入它对应的css包，也就是需要将下面这句话写入到main.js中。 import ‘element-ui/lib

element-ui

大菠萝

03-27

643

type="flex"，采用flex布局，搭配justify="center|end|space-between|space-around"，默认start。:xs、:sm、:md、:lg、 :xl，响应式布局，值是占有的份数。:gutter，间隙，不会占span的份数。:span，占的份数，共24份。:offset，偏移量。

1 条评论您还未登录，请先登录后发表或查看评论

element ui 样式不生效

L221545的博客

09-08

1424

element ui 弹窗样式不生效

用了elementui中的组件，设置样式时始终不生效的解决方案

qq_52526079的博客

11-24

3124

后使用到里面样式的dom会添加data-v-xxxx这种属性防止css污染，但是message生成的dom是没有添加data-v-xxx属性的，所以样式无效。原因：可能是因为加了。

ElementUI自定义CSS样式不生效的解决方案

热门推荐

诗水人间

09-02

14万+

例如有一个输入框 <el-input ref="mySearch" class="mySearch" size="small" placeholder="请输入内容" suffix-icon="el-icon-search" v-model="input1"> </el-input> 如果没有加自定义样式则输入框大概是这样的我希望是这样的通过谷歌浏览器的开发者工具，找到对应样

Bug：elementUI样式不起作用、Vue引入组件报错not found等（Vue+ElementUI问题汇总）

weixin_45565886的博客

09-29

4284

Bug：elementUI样式不起作用

修改elementUI样式未生效问题（挂载到了body标签上）

superManee的博客

12-09

3843

修改elementui样式失败、/deep/方法修改样式失效、子组件内修改elementUI样式未生效、vuejs style标签中修改公共样式失败

element-ui tree树形控件:default-checked-keys 设置空数组默认还是选中状态问题

01-20

在这个问题中，开发者遇到了一个关于`default-checked-keys`属性的问题，即当尝试将该属性设置为空数组时，树形控件的节点依然保持选中的状态，这与预期的行为不符。 `default-checked-keys`属性是Element UI Tree...

vue结合element-ui使用示例

10-17

本文是一篇关于如何在Vue.js项目中集成Element-UI框架的详细教程。在开始学习本文之前，你应该具备基本的Vue.js知识和对npm以及Node.js环境有所了解。Element-UI是饿了么前端团队开发的一套基于Vue 2.0的桌面端组件...

element-ui el-input不生效

最新发布

08-15

4. **样式冲突**: 其他CSS样式可能会覆盖Element-UI的样式，检查是否有其他样式表干扰到了输入框的显示。 5. **版本兼容性**: 确保使用的Element-UI版本与项目的Vue版本兼容，不匹配可能导致某些组件无法正常工作。...

引入element-ui组件后样式无效

木昆灵寒酥的博客

08-11

924

引入element-ui组件后样式无效，解决办法。

elementui样式不生效

ANNENBERG的博客

08-25

1403

在main.js中引入js和css样式挂载为vue的插件,如果这几步都没有问题,但是element的样式还是不显示!可以看一下vue.config.js文件中的css配置项,改成true。

vue第三方组件如elementUI修改css无效的问题

weixin_41597344的博客

09-02

1865

一、Scoped 在我们写vue的css是通常会<style scoped lang="xxxx"></style> 其中scope的含义是其CSS只在当前组件中生效，这是个很好的属性，让开发者之间的css不互相污染。但是当使用第三方库如elementUI时，往往不能改变其CSS。使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其...

element-ui引入样式不起作用

sanjie123的专栏

08-20

1125

element-ui样式无法引入

vue项目，引入插件element ui 样式不生效

ybilss的博客

08-03

5532

用vue ui 命令引入插件elementui 样式不生效 步骤一：执行如下命令，安装babel-plugin-component npm install babel-plugin-component --save 步骤二：在vue项目的.babelrc文件中增加如下JSON "plugins": [ [ "component", { "libraryName": "element-ui", "style..

引入element ui，组件生效，但是部分样式未生效

weixin_45868184的博客

12-20

166

反复实验后，都不能让样式生效，换个浏览器就可以生效了。还可以关了重新启动一下可能也可以解决问题。

修改elementui组件的样式不生效问题，

m0_47177307的博客

04-07

913

important，加上之后还是不生效，检查代码发现，<style lang="scss" scoped> 设置了scoped属性。样式只会影响当前组件内部的元素，而不会影响引入的第三方组件，当在一个 Vue 单文件组件中使用。样式时，样式规则只会应用于当前组件内部的元素，而不会泄漏到引入的第三方组件中。在修改表单组件时，想让表单的l<el-form-item>组件的able字体不加粗，或者把scoped属性去掉，就算不使用样式穿透也可以改变elementui组件样式。在 Vue 单文件组件中，

vue在使用element组件时 scss的样式没作用

caoyan0829的博客

09-27

1917

先看下代码问题：我发现 nesting-details 的样式没有变化，然后我就看了下Elements的打印发现！！！一下子我就懂了，原来element ui 把 el-dialog 弹窗的元素给分离出去了，他不是当前dispatch-index页面内部的元素而是相当于一个全局的元素去展示的，所以之前scss表里的嵌套关系是错误的要改成： ok：问题解决结论：dialog弹窗的样式，单独处理，不能结合本页面去写嵌套样式 ...