无法将 google 的 Material Web 组件 SASS 导入 React 项目答案

【问题标题】：Cannot import google's material web component SASS into React project无法将 google 的 Material Web 组件 SASS 导入 React 项目
【发布时间】：2021-03-23 08:50:54
【问题描述】：

我有一个使用 create-react-app v4.0.1 创建的基本 React 'hello world' 应用

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

当我导入谷歌的材料 SASS 时，我得到以下错误：

./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;

我尝试将节点模块添加到路径

SETX SASS_PATH .\node_modules

我尝试在 import 语句中添加 ~

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

【问题讨论】：

你试过这个链接吗：material.io/develop/web/docs/getting-started？看起来你必须使用：@use '@material/button';.
@ShamarYarde 是的，同样的问题 :(
导入语句有效吗？
@ShamarYarde Nop，还是同样的问题。使用“使用”或“导入”

标签： reactjs sass material-components-web

【解决方案1】：

您正在使用 node-sass（顺便说一句，它已被弃用）。它不支持 MDC Web 所需的一切。您必须使用 Dart Sass 包 sass 来编译 MDC Web 的 SASS 代码。

【讨论】：