sass-loader can't resolve :global or :local on css-module on .sass extension

[jarindr]

:global and :local isn't working with sass-loader with .sass extension
I tried to switch to less and stylus loader and it works perfectly. Not sure this is my fault in configuration ? or just sass syntax doesn't allow :global and :local

  {
    test: /\.sass$/,
    use: [{
      loader: 'style-loader'
    }, {
      loader: 'css-loader',
      options: {
        modules: true,
        localIdentName: '[name]-[local]-[hash:base64]'
      }
    },
    {
      loader: 'postcss-loader'
    }, {
      loader: 'sass-loader'
    }]
  },

SOLUTION: If anyone get this problem, /:global will fix the problem.

[alexander-akait]

@jarindr sass-loader don't resolve :global and :local it is do css-loader

[alexander-akait]

https://github.com/webpack-contrib/css-loader

[jarindr]

@evilebottnawi Yes i get that, unfortunately It isn't working with sass-loader with .sass extension
I tried to switch to less and stylus loader and it works perfectly. Not sure this is my fault in configuration or not.

  {
    test: /\.sass$/,
    use: [{
      loader: 'style-loader'
    }, {
      loader: 'css-loader',
      options: {
        modules: true,
        localIdentName: '[name]-[local]-[hash:base64]'
      }
    },
    {
      loader: 'postcss-loader'
    }, {
      loader: 'sass-loader'
    }]
  },

[alexander-akait]

@jarindr please create minimal reproducable test repo, we will not help you if you do not provide information, good issue - issue with detailed information, not empty 👍

[alexander-akait]

@jarindr and seems sass syntax don't allow using :global and :local

[jarindr]

@evilebottnawi you just answered too fast lol i'm editing and accidentally click submit. So, if that is the case, any solution for using sass with some global scope ?

[alexander-akait]

@jarindr seems works good in https://www.sassmeister.com/ and support

[alexander-akait]

weird, all sass files should be indentedSyntax set to true https://github.com/webpack-contrib/sass-loader/blob/master/lib/normalizeOptions.js#L61, seems in your case indentedSyntax is false, try to set indentedSyntax in option

[jarindr]

@evilebottnawi Found the problem, for .sass you need to escape /:global to make it possible to compile with its syntax and pass to css-loader.
thanks for the help btw!

[alexander-akait]

@jarindr Great! 👍

[o-alexandrov]

escaping is possible using \:global
not /:global

[jpap]

Why is that we do not have to escape when using .scss, and only with .sass?

[thomashibbard]

@jpap Are you able to get :global to work with .scss? Eg:

:global {
  .nestedClassParent {
    color: blue;

    .nestedClassChild {
      color: red;
    }
  }
}

This isn't working for me with or without the \

[jpap]

@thomashibbard what worked for me was something like:

:global(.nestedClassParent) {
   color: blue;
}
:global(.nestedClassChild) {
   color: red;
}

[agconti]

I'm running into this same issue. Escaping with \:global is still throwing a ModuleParseError:

ModuleParseError: Module parse failed: Expecting Unicode escape sequence \uXXXX (1:1)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> \:global {
|     html, body {
|         background-color: red;

[mihanizm56]

have the same issue with CRA v3 and sass-loader inside of it

[mbonaci]

It seems that dart sass complains about :global:

Exception has occurred: Error: Error on line 36, column 15 of src/modules/metrics/styles/MetricEditForm.scss: Expected digit.
   ╷
36 │   div:global(.Select) {
   │               ^
   ╵
at Object.wrapException (.../node_modules/sass/sass.dart.js:1235:17)
    at SpanScanner.error$3$length$position (.../node_modules/sass/sass.dart.js:62663:15)
    at SpanScanner.error$2$position (.../node_modules/sass/sass.dart.js:62669:19)
    at ScssParser0._stylesheet0$_tryDecimal$1$allowTrailingDot (.../node_modules/sass/sass.dart.js:87791:12)
    at ScssParser0._stylesheet0$_number$0 (.../node_modules/sass/sass.dart.js:87769:18)
    at ScssParser0._stylesheet0$_singleExpression$0 (.../node_modules/sass/sass.dart.js:87482:24)
    at ScssParser0.expression$3$bracketList$singleEquals$until (.../node_modules/sass/sass.dart.js:87184:40)
    at ScssParser0.expression$2$singleEquals$until (.../node_modules/sass/sass.dart.js:87452:19)
    at ScssParser0._stylesheet0$_expressionUntilComma$1$singleEquals (.../node_modules/sass/sass.dart.js:87467:19)
    at ScssParser0._stylesheet0$_argumentInvocation$1$mixin (.../node_modules/sass/sass.dart.js:87125:28)
    at ScssParser0._stylesheet0$_argumentInvocation$0 (.../node_modules/sass/sass.dart.js:87158:19)
    at ScssParser0.identifierLike$0 (.../node_modules/sass/sass.dart.js:87972:68)
    at ScssParser0._stylesheet0$_singleExpression$0 (.../node_modules/sass/sass.dart.js:87570:24)
    at ScssParser0.expression$3$bracketList$singleEquals$until (.../node_modules/sass/sass.dart.js:87184:40)
    at ScssParser0.expression$0 (.../node_modules/sass/sass.dart.js:87458:19)
    at ScssParser0._stylesheet0$_declarationOrBuffer$0 (.../node_modules/sass/sass.dart.js:86177:25)
    at ScssParser0._stylesheet0$_declarationOrStyleRule$0 (.../node_modules/sass/sass.dart.js:86096:35)
    at ScssParser0._stylesheet0$_statement$1$root (.../node_modules/sass/sass.dart.js:86008:166)
    at ScssParser0._stylesheet0$_statement$0 (.../node_modules/sass/sass.dart.js:86012:19)
    at Object.call$0 (.../node_modules/sass/sass.dart.js:1571:24)
    at ScssParser0.children$1 (.../node_modules/sass/sass.dart.js:83566:33)
    at ScssParser0._stylesheet0$_withChildren$1$3 (.../node_modules/sass/sass.dart.js:88890:39)