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

: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.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 5
Comments: 17 (7 by maintainers)

Most upvoted comments

escaping is possible using \:global not /:global

+44

o-alexandrov on Aug 6, 2017

@thomashibbard what worked for me was something like:

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

jpap on Oct 19, 2017

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

jpap on Sep 21, 2017

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)

mbonaci on Jul 21, 2021

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;

agconti on Feb 7, 2020

@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!

jarindr on May 7, 2017

@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 on May 7, 2017