React项目中使用node-sass编写样式时出现报错的问题求助

看起来你遇到的问题主要来自两个方面：依赖兼容性冲突和Sass文件语法格式不匹配，下面一步步帮你解决：

1. 核心问题：react-scripts 5.x 不再支持 node-sass #

React Scripts 5.0.0 版本开始，已经移除了对 node-sass 的支持——因为 node-sass 已经停止维护，官方推荐使用 Dart Sass（也就是 npm 上的 sass 包）。你当前的 package.json 里同时使用了 react-scripts: 5.0.0 和 node-sass: 7.0.1，这会导致编译时的兼容性报错。

解决步骤： #

• 先卸载 node-sass：

  npm uninstall node-sass
  # 如果你用yarn的话：
  yarn remove node-sass
  

• 安装官方推荐的 sass 包：

  npm install sass --save-dev
  # yarn版本：
  yarn add sass --dev
  

2. 额外问题：Sass文件后缀与语法不匹配 #

你的样式文件后缀是 .sass，但写法却是 SCSS 语法（使用大括号 {} 和分号 ;）——这会导致语法解析错误。因为：

• .sass 文件要求使用缩进语法（不需要大括号、分号，靠缩进区分层级）
• .scss 文件才支持类似 CSS 的大括号语法

两种修正方式选其一： #

方式一：修改文件后缀

把 Navbar.sass 重命名为 Navbar.scss，同时修改组件里的导入路径：

import './Navbar.scss';

这种方式不需要改样式代码，适合习惯CSS写法的开发者。

方式二：改成Sass缩进语法

如果想保留 .sass 后缀，需要把样式代码改成缩进格式：

.app__navbar
  width: 100%
  display: flex
  justify-content: space-between
  align-items: center

最后验证 #

做完上面的修改后，重启你的开发服务器（npm start），应该就能正常编译Sass样式了。

内容的提问来源于stack exchange，提问作者Ashik