时间戳

首页 > 解决方案 > 无法将 google 的 Material Web 组件 SASS 导入 React 项目

reactjs - 无法将 google 的 Material Web 组件 SASS 导入 React 项目

问题描述

我有一个使用 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;

我尝试将节点mudules添加到路径

SETX SASS_PATH .\node_modules

我尝试在 import 语句中添加一个 ~

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

标签： reactjssassmaterial-components-web

解决方案

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

推荐阅读