编译React项目时持续出现CSS ParserError问题求助

项目用npm start可正常运行，但执行npm run build时出现如下编译错误：

npm run build                               

activity-feed@0.1.0 build
> react-app-rewired --openssl-legacy-provider build

Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
Browserslist: caniuse-lite is outdated. Please run the following command: `yarn upgrade`
Browserslist: caniuse-lite is outdated. Please run the following command: `yarn upgrade`
Failed to compile.

./src/HubView.scss
ParserError: Syntax Error at line: 1, column 22

具体解决步骤 #

1. 修复嵌套选择器的转义错误 #

你的SCSS代码中出现了&这种HTML实体转义字符，SCSS解析器无法识别，必须替换为原生的&：

• 将.HubView__carousel-items-wrapper里的&::-webkit-scrollbar改为&::-webkit-scrollbar
• 将.HubView__carousel-items里的&:after改为&:after
• 将.HubView__carousel-items里的& > .HubView__glue-card改为& > .HubView__glue-card

这是导致行1列22语法错误的核心原因，转义字符破坏了SCSS的语法结构。

2. 统一变量语法（可选但推荐） #

你混合使用了CSS原生变量（--margin）和SCSS语法，部分生产环境的解析器可能存在兼容问题，建议换成SCSS变量：

// 原代码
.HubView {
  --margin: 16px;
  margin: var(--margin);
}

// 修改后
.HubView {
  $margin: 16px;
  margin: $margin;
}

同时将所有var(--margin)替换为$margin，比如margin: 0 calc($margin * -1)。

3. 更新过时依赖 #

虽然caniuse-lite过时是警告，但可以一并解决避免干扰：

• 使用npm：

  npm update caniuse-lite browserslist
  

• 使用yarn：

  yarn upgrade caniuse-lite browserslist
  

4. 确认SCSS解析依赖完整 #

确保项目已安装正确的SCSS编译依赖：

npm install sass sass-loader --save-dev

如果用react-app-rewired自定义了配置，检查config-overrides.js中的SCSS规则是否与生产构建兼容。

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