使用ElementUI作为前端组件框架/和postcss冲突报错/el-button高度过高

最新推荐文章于 2024-09-05 15:20:03 发布

reisaru

最新推荐文章于 2024-09-05 15:20:03 发布

阅读量2.1k

点赞数 1

分类专栏：前端 vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_41337100/article/details/105734500

版权

在使用ElementUI时遇到与postcss冲突的问题，表现为CSS内容覆盖警告。解决方案是在.rootcssrc.js中调整，而非修改node_modules。另外，文章中提到一个按钮元素的高度异常，原因是el-row的高度自动填充，通过设置el-row的内联样式来解决了问题。

摘要由CSDN通过智能技术生成

教程官网真的很详细！！！
https://element.eleme.cn/#/zh-CN/component/quickstart
但是这时候引入会出现问题：

(1:98603) ‘.el-tooltip__popper .popper__arrow::after’ already has a ‘content’ property, give up to overwrite it.
@ ./node_modules/element-ui/lib/theme-chalk/index.css 4:14-143 14:3-18:5 15:22-151
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.0.7:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

@ ./node_modules/element-ui/lib/theme-chalk/index.css 4:14-143 14:3-18:5 15:22-151
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.0.7:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

这是因为和postcss冲突导致的！
因为我是新版的postcss，所以只需要在根目录.postcssrc.js文件里面修改！不需要再去node_module里面找postcss-px-to-viewport的index.js修改！

module.exports = {
   
  "plugins": {
   
    "postcss-import": {
   },
    "postcss-url": {
   },
    "postcss-aspect-ratio-mini": {
   },
    "postcss-write-svg": {
   
      utf8: false
    },
    "postcss-cssnext": {