Angular 19 + Tailwind CSS 4项目Docker镜像构建失败求助

我正在开发基于Angular 19和Tailwind CSS 4的应用，本地运行npm start和npm run build均正常，但构建Docker镜像时失败。

执行构建命令：

docker build -t tw-app .

核心报错信息 #

构建到RUN npm run build步骤时终止，关键错误如下：

✘ [错误] 缺少多行注释结束标记"*/"
src/styles.scss:2653:1:
  2653 │ }
       │  ^
多行注释起始于此处：
src/styles.scss:2247:14:
  2247 │     uri: /hoge/*;
       │               ~~

同时伴随相关警告：

• Sass @import 规则已被弃用
• CSS中使用了//单行注释（不符合规范）
• 大括号匹配异常

我的Dockerfile内容 #

ARG NODE_VERSION=22.13.1

FROM node:${NODE_VERSION}-alpine AS build

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:alpine

COPY --from=build /app/dist/tw-4 /usr/share/nginx/html

COPY /scripts/robots.txt /usr/share/nginx/html/robots.txt

COPY /scripts/default.conf /etc/nginx/conf.d/default.conf

COPY /scripts/nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

1. 修复CSS语法错误（核心） #

uri: /hoge/*;中的/*被Sass解析为多行注释起始标记，导致后续无闭合标记报错。修改为用引号包裹属性值：

// 原错误写法
uri: /hoge/*;

// 修改后
uri: "/hoge/*";

2. 统一CSS注释风格 #

将所有//单行注释替换为/* ... */格式，避免构建工具触发语法检查错误：

// 原写法
// 这是一行注释

// 修改后
/* 这是一行注释 */

3. 修复大括号匹配问题 #

检查src/styles.scss第2246行的.\[uri\:\/hoge\/\*\] {，确保存在对应的闭合大括号；删除第2653行多余的}。

4. 对齐本地与Docker的依赖环境 #

本地构建可能启用了宽松模式，Docker环境下构建更严格。确保依赖版本完全一致：

• 保留package-lock.json，Docker中COPY package*.json ./会自动包含该文件
• 将Dockerfile中的RUN npm install替换为RUN npm ci，强制安装与本地完全一致的依赖版本

5. 迁移Sass导入语法（可选，解决弃用警告） #

将@import "tailwindcss";改为Sass官方推荐的@use语法：

@use "tailwindcss";

修改完成后，先在本地重新执行npm run build确认无错误，再运行docker build -t tw-app .构建镜像。

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