码迷,mamicode.com
首页 > 其他好文 > 详细

VUE Element Admin框架深度选择器/deep/编译报错,导致el-card修改样式失败的解决方案

时间:2020-07-19 15:46:48      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:expected   选择器   版本   代码   fail   sass   admin   替换   scope   

需求背景

el-card组件的el-card__header行高设置比较高,需要在项目中修改掉,但无论如何修改都不生效。

问题描述

头部样式在scoped下作用无效,可以通过添加/deep/的方式解决,但由于版本或者其他原因,目前未知,添加该方法总是报错。如下代码总是编译不通过。

.box-card /deep/ .el-card__header {
    padding: 12px 14px;
    font-size: 14px;
  }

报错信息如下:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

  .role-card /deep/ .el-card__header {
          ^
      Expected selector.
    ?
577 │ .role-card /deep/ .el-card__header{
    │            ^
    ?

解决方案

经查网上资料,有人建议修改vue-loader和webpack版本,感觉比较复杂,找了一个简单的实现路径:
将/deep/替换为

::v-deep

或者

>>>

都可以实现此需求。

VUE Element Admin框架深度选择器/deep/编译报错,导致el-card修改样式失败的解决方案

标签:expected   选择器   版本   代码   fail   sass   admin   替换   scope   

原文地址:https://www.cnblogs.com/zhangyezi/p/13339379.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!