Scss或Less中:global{...}的作用

 在React项目中，样式语言无论是用scss或less，如果想让 样式 仅作用在某个组件，而不影响全局，一般都会把样式文件进行模块化，即打包后每个class名都会被自动加上一串唯一的序列号。

假如 想让某个class不加序列号，可以作用到其他组件，那么就写到 :global { ... } 中即可，如下图的例子：

/* 在test.module.scss文件中 */
.main {
  width: 100px;
  :global {
    .ant-popover-title{
        color: red;
    }
  }
}

打包完的结果：

.main__3D0Xe{ width: 100px; }

.main__3D0Xe .ant-popover-title{
    color: red;
}

可以看到，main后面自动追加了一串唯一的序列号，而ant-popover-title则没有，这样在main元素中其他任何组件，只要用到ant-popover-title这个class，字体都会变成红色。

参考：CSS Modules 用法教程（阮一峰）