sass-loader: Error: Missing whitespace after :global

This is my style:

Error

.wrap-box {
    margin: 15px 0;
    :global {
        &.box {
            .otherClass {
                width: 44px;
                height: 44px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 20px;
            }
        }
    }
}

Error message

Module build failed: Missing whitespace after :global (3:3)

How can I fix this issue.

Sorry if the issue is already there but I can not find it.

Thanks!

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 19 (7 by maintainers)

Most upvoted comments

any workaround?

I’ve created my React app with create-react-app v3.0.1 and I’m trying to use CSS modules.

I want to make the following CSS:

.foo {
  :global {
    &.ant-select {
      width: 105px;
    }
  }
}

which I think it should output

.styles_foo__3BRjd.ant-select {
  width: 105px;
}

edit:

I found this workaround: https://github.com/css-modules/css-modules/issues/295#issuecomment-404873976

+13

asumaran on Jul 9, 2019

.foo {
-  :global {
+  &:global { 
    &.ant-select {
      width: 105px;
    }
  }
}

less + css modules also has this problem. after looking into the workaround: https://github.com/webpack-contrib/sass-loader/issues/507#issuecomment-509759139 just add & before :global works for me (*.module.less in vite)

magicdawn on May 16, 2023

I want complier from

.wrap {
    :global {
        &.original-class {
        // style
        }
    }
}

._2_aKvs-b8bW2Vg3fwHozO.original-class {
  // style
}

thedv91 on Nov 13, 2017

@evilebottnawi @michael-ciniawsky Here is a reproduction, please help to locate this issue.

https://github.com/JounQin/issues/tree/scss-global-selector

JounQin on Dec 12, 2017

@chacbumbum can you try escape \:global? I am not familiar with css modules

alexander-akait on Nov 13, 2017

downvotes are probably from Next.js users which the workaround doesn’t work for because next.js doesn’t recognize the workaround as a “pure selector” so it errors.

salazarm on Dec 8, 2020