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 错误。

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