Error:Missing whitespace after :global报错问题解决

今天遇到一个问题,在 React 项目中使用 less 语法通过 :global 修改组件的样式时报错:Error: Missing whitespace after :global

本文就将介绍如何在 less 代码中正确使用 :global,出现“Missing whitespace after :global”报错的原因和解决方法。

:global 的作用

:global 是 less 中的一个伪类,它可以引用全局样式。一般用于修改第三方组件或模块的样式。

使用 :global 时常见的错误

在使用 :global 时,最常见的错误之一就是 & 和 :global 连接的问题。导致 less 编译器出现 Missing whitespace after :global 错误。像下面这样:

.textArea {
  width: 100%;

  :global {
    &.ant-input {
      background-color: aqua;
    }
  }
}

或者:

.textArea {
  width: 100%;

  :global {
    &.ant-input {
      background-color: aqua;
    }
  }
}

解决方法

要解决此错误,需在 :global 前后都增加 &。例如:

.textArea {
  width: 100%;

  &:global {
    &.ant-input {
      background-color: aqua;
    }
  }
}

总结

在 less 代码中使用 :global 时,请务必注意 &:global 之间的连接问题。避免出现 Missing whitespace after :global 错误。

未经允许不得转载:Web前端开发资源网 » Error:Missing whitespace after :global报错问题解决

推荐阅读:

jQuery实现元素的鼠标移入移出及点击显示隐藏(微信二维码)

jQuery text() html() val()设置内容和attr()设置属性的用法

HTML img src图片路径不存在,则显示一张默认图片的方法

CSS屏蔽手机端长按选中 防止图片自动放大 禁止复制

使用 swiper 轮播插件遇到的问题及解决方法

赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)