执行npm run prod编译资源时出现SVG解析警告问题

问题现象 #

• 执行npm run prod编译前端资源时，postcss-loader抛出2条警告：Error in parsing SVG: Non-whitespace before first tag，对应./resources/sass/app.scss的1973行和2084行
• 编译完成后警告会重复出现且信息更详细
• 执行npm run dev编译时无任何警告

关联代码片段 #

app.scss内容：

@use 'sass:math';
@use 'sass:list';

@import "compile/bootstrap";
@import "compile/bootstrap_limitless";
@import "compile/layout";
@import "compile/components";
@import "compile/colors";

@import "datatables";
@import "forms";
@import "daterangepicker";

核心成因 #

• prod环境的激进优化规则：dev环境仅做基础编译，不会启用严格的资源压缩与格式校验；而prod环境会开启CSS压缩、内联SVG优化等全量处理，postcss-loader此时会严格解析样式中的内联SVG资源（比如data:image/svg+xml,...格式的背景图）。
• 内联SVG的格式缺陷：对应行引入的依赖样式文件中，存在内联SVG代码开头带有非空白字符的情况——可能是多余的注释、换行、编码错误字符，dev环境下解析器忽略这类问题，prod环境的严格校验则触发警告。
• 依赖库的SVG处理差异：你引入的bootstrap、limitless等组件库中，部分内联SVG在prod编译时会被压缩工具（如cssnano）进一步处理，过程中暴露了原本隐藏的格式问题。

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