postcss-scss: Error: Unknown word when using sass's `map-get`

I’m getting this error then using map-get.

ERROR in ./~/css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!./~/postcss-loader!./src/table.scss
Module build failed: Unknown word (15:12)

  13 |
  14 | @mixin mediaquery($name) {
> 15 |   @media #{map-get($breakpoints, $name)} {
     |            ^
  16 |     @content;
  17 |   }

I’ve tried using the loader like this 'postcss-loader?parser=postcss-scss', but without success:

ERROR in ./~/css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!./~/postcss-loader?parser=postcss-scss!./src/utils.scss
Module build failed: CssSyntaxError: /Users/Tieme/Projects/Repos/react-css-modules-examples/utils.scss:15:4: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser
    at Input.error (/Users/Tieme/Projects/Repos/react-css-modules-examples/node_modules/postcss/lib/input.js:111:22)
    at Parser.unknownWord (/Users/Tieme/Projects/Repos/react-css-modules-examples/node_modules/postcss/lib/parser.js:457:26)
    at Parser.other (/Users/Tieme/Projects/Repos/react-css-modules-examples/node_modules/postcss/lib/parser.js:174:14)
    at Parser.loop (/Users/Tieme/Projects/Repos/react-css-modules-examples/node_modules/postcss/lib/parser.js:81:26)
    at parse (/Users/Tieme/Projects/Repos/react-css-modules-examples/node_modules/postcss/lib/parse.js:26:16)
    at new LazyResult (/Users/Tieme/Projects/Repos/react-css-modules-examples/node_modules/postcss/lib/lazy-result.js:70:24)
    at Processor.process (/Users/Tieme/Projects/Repos/react-css-modules-examples/node_modules/postcss/lib/processor.js:117:12)
    at processCss (/Users/Tieme/Projects/Repos/react-css-modules-examples/node_modules/css-loader/lib/processCss.js:188:11)
    at Object.module.exports (/Users/Tieme/Projects/Repos/react-css-modules-examples/node_modules/css-loader/lib/loader.js:24:2)
 @ ./~/css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!./~/postcss-loader?parser=postcss-scss!./src/table.scss 3:10-217

Example repo: https://github.com/tiemevanveen/react-css-modules-examples/tree/scss-postcss

About this issue

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

Most upvoted comments

Seems like you just have webpack configuration issue and send SCSS to PostCSS before Sass.

Got it. importLoaders should have been equal to the number of loaders. So sass + postcss = 2…

This worked:

  {
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract('style-loader', [
      'css?modules&importLoaders=2&localIdentName=[path]_[name]_[local]',
      'postcss-loader',
      'sass'
    ])
  },

teameh on Oct 15, 2016