Cannot import google's material web component SASS into React project

Question

I have a basic React 'hello world' app created using create-react-app v4.0.1

"material-components-web": "^8.0.0",
"node-sass": "^4.14.1",
"react": "^17.0.1",

When I import Google's material SASS, I get the following error:

./src/app.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/app.scss)
SassError: Invalid CSS after "@include mixins": expected 1 selector or at-rule, was ".core-styles;"
        on line 25 of node_modules/@material/button/mdc-button.scss
        from line 7 of C:\Users\kilroy\OneDrive - University of Guelph\CIS 4300 Human Computer Interaction-DESKTOP-M14AAG4\Project\shop\src\app.scss
>> @include mixins.core-styles;

I've tried adding node mudules to path

SETX SASS_PATH .\node_modules

I've tried adding a ~ to the import statement

@import "~@material/button/mdc-button";

Answer 1

You are using node-sass (which, by the way, is deprecated). It doesn't support everything needed for MDC Web. You have to use Dart Sass package sass to compile MDC Web's SASS code.