排查create-react-app构建SCSS语法错误问题

数据老陈

2026-8-2

React + CoreUI 编译style.scss失败排查方案

报错信息

Failed to compile.
./src/scss/style.scss
ParserError: Syntax Error at line: 1, column 62

环境说明

项目通过create-react-app创建并集成CoreUI
npm start可正常编译运行，但部署构建时触发上述错误
浏览器中查看的style.scss编译后内容无明显语法问题：

@charset "UTF-8";
/*!
* CoreUI - HTML, CSS, and JavaScript UI Components Library
* @version v4.2.6
* @link https://coreui.io/
* Copyright (c) 2022 creativeLabs Łukasz Holeczek
* License MIT  (https://coreui.io/license/)
*/
:root {
  --cui-blue: #0d6efd;
  --cui-indigo: #6610f2;
  --cui-purple: #6f42c1;
  --cui-pink: #d63384;
  --cui-red: #dc3545;
  --cui-orange: #fd7e14;
  --cui-yellow: #ffc107;
  --cui-green: #198754;
  --cui-teal: #20c997;
  --cui-cyan: #0dcaf0;
  --cui-black: #000015;
  --cui-white: #ffffff;
}

构建文件夹未生成style.scss文件

排查与解决步骤

检查本地原始SCSS文件：浏览器中看到的是编译后CSS，直接打开本地src/scss/style.scss定位第1行第62列，确认是否存在特殊字符、转义错误（比如原始文件里是否误用"代替双引号）。
校验文件编码：确保文件为UTF-8无BOM格式，部分编辑器保存时添加的BOM头会导致解析报错，可通过VS Code右下角切换编码后重新保存。
重置依赖：删除node_modules和package-lock.json后重新安装，排除依赖版本冲突或损坏问题：
```
rm -rf node_modules package-lock.json
npm install
```
确认SCSS依赖安装：create-react-app默认需要sass依赖支持SCSS编译，检查是否已安装：
```
npm install sass --save-dev
```
检查导入路径与扩展名：确认所有SCSS导入路径正确、大小写匹配（Linux环境敏感），无把.css文件误当作.scss导入的情况。