Material-components-web: SassError: Invalid CSS after "...ch $size in map": expected expression (e.g. 1px, bold), was ".keys(variables.$co"

[fpichlou]

I'm using RMWC in my React app, It is a react wrapper for material-web-component or MDC. I'm getting the below error when I want to override the --mdc-layout-grid-margin-tablet related variable:

./src/styles/main.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/styles/main.scss)
SassError: Invalid CSS after "...ch $size in map": expected expression (e.g. 1px, bold), was ".keys(variables.$co"
        on line 27 of node_modules/@material/layout-grid/mdc-layout-grid.scss
        from line 4 of /home/myuser/myproject/src/styles/main.scss
>>   @each $size in map.keys(variables.$columns) {

   --------------------^

Also how I can override variable of other material-web-component like this?

[asyncLiz]

That error is typically seen when using the node-sass implementation, which does not support Sass modules and is not supported by MDC. You'll need to use the Dart sass implementation.

Luckily it's an easy replacement when using sass-loader. Run npm uninstall node-sass && npm install sass. sass-loader will automatically use the new implementation.

If it does not, check your webpack.config.js in case you're manually specifying the implementation in your sass-loader options. If you are, change implementation: require('node-sass') to implementation: require('sass').

Let us know if you continue to have problems!