React项目Docker构建失败：style.scss解析语法错误求助

问题描述 #

Docker构建React镜像时失败，报错信息：

React Build - Failed to compile. ./src/scss/style.scss ParserError: Syntax Error at line: 1, column 39

此前相同style.scss可正常部署，当前使用CoreUI React模板，相关代码片段如下：

Dockerfile片段 #

FROM node:lts-alpine3.16 as builder
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY ./package.json /app/package.json
COPY . ./
RUN npm install
RUN npm install react-scripts@3.4.1 -g
RUN npm run build

style.scss代码 #

// If you want to override variables do it here
@import "variables";

$enable-ltr: true;
$enable-rtl: true;

// Import CoreUI styles
@import "@coreui/coreui/scss/coreui";

// Import Chart.js custom tooltips styles
@import "@coreui/chartjs/scss/coreui-chartjs";
@import "@coreui/coreui/scss/mixins/_ltr-rtl.scss";

@import "~bootstrap/dist/css/bootstrap.min.css";

@import "rc-tree/assets/index.css";

排查解决思路 #

• 检查variables文件有效性：报错指向第1行@import "variables";，先确认src/scss/目录下是否存在variables.scss文件（SCSS导入可省略.scss后缀，但文件必须存在）；若文件存在，检查文件开头是否有特殊字符、未闭合注释等语法错误。
• 清理Docker构建缓存：过往正常构建但当前失败，大概率是缓存的依赖包出现异常。构建时添加--no-cache参数强制重新安装所有依赖：docker build --no-cache -t your-image-name .。
• 统一依赖版本：Dockerfile中全局安装了react-scripts@3.4.1，但项目本地package.json中的react-scripts版本可能与之冲突，或CoreUI、Bootstrap的缓存版本存在兼容性问题。建议在Dockerfile中先安装本地依赖，再处理全局包；或删除package-lock.json和node_modules后重新安装。
• 修正SCSS导入语法：新版react-scripts已不再支持~符号导入，将@import "~bootstrap/dist/css/bootstrap.min.css";改为@import "bootstrap/dist/css/bootstrap.min.css"（需确保bootstrap已在项目依赖中）。另外，@import "@coreui/coreui/scss/mixins/_ltr-rtl.scss";可能属于重复导入——CoreUI主文件通常已包含该mixin，重复导入可能引发语法冲突，可尝试删除该行。
• 更换Node镜像版本：当前使用node:lts-alpine3.16，尝试切换到更稳定的LTS版本（如node:18-alpine），避免旧版本Node/npm对新依赖的兼容性问题。
• 本地预验证：先在本地执行npm run build，若本地也失败，说明问题出在项目本身的依赖或SCSS语法；若本地成功，再聚焦Docker构建环境的差异排查。

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