Angular CLI+Webpack修改public path后SCSS图片加载失败

我之前碰到过几乎一模一样的问题，Angular CLI 1.7.x版本对CSS资源的处理逻辑和1.6.7确实有不小的变化，这事儿大概率是因为版本升级后默认启用了CSS提取，导致SCSS编译出来的资源路径在编译阶段就固定死了，不像旧版本那样会在运行时动态解析。

问题根源 #

在Angular CLI 1.6.7里，CSS通常会被打包进JS bundle，运行时通过JS动态插入到页面中，这时候你修改webpack_require.p的操作会被动态应用到CSS内的图片路径上。但1.7.x版本默认把CSS提取成了单独的.css文件，这些文件里的图片路径在Webpack编译时就已经根据当时的publicPath生成完毕了，后续运行时再修改webpack_require.p根本没法回溯修改这些静态路径，所以才会出现只有SCSS相关资源加载失败的情况。

解决方案 #

根据你的需求，有几个可行的方向：

1. 禁用CSS提取（快速临时修复）

如果项目可以接受CSS打包进JS的方式，直接在angular-cli.json的build配置里关闭CSS提取就行：

{
  "projects": {
    "你的项目名称": {
      "architect": {
        "build": {
          "options": {
            "extractCss": false
          }
        }
      }
    }
  }
}

这样CSS就会回到旧版本的处理方式，运行时修改webpack_require.p就能正常影响CSS内的图片路径了。

2. 在Webpack配置中提前设置动态publicPath（推荐长期方案）

运行时修改webpack_require.p本质是动态调整资源根路径，更可靠的方式是在Webpack构建阶段就配置支持动态publicPath，让编译后的资源路径能自动适配运行时环境。

• 首先，你可以通过ng eject导出Angular CLI的Webpack配置（或者用@angular-builders/custom-webpack扩展配置），在Webpack的output里把publicPath设为一个占位符：

output: {
  publicPath: '__DYNAMIC_PUBLIC_PATH__'
}

• 然后在项目入口文件（比如main.ts最顶部），替换这个占位符为你需要的动态路径，同时处理已提取的CSS文件：

// 先修改webpack的publicPath
declare const __webpack_require__: any;
const dynamicPublicPath = '你的动态资源根路径';
__webpack_require__.p = dynamicPublicPath;

// 替换CSS文件中的占位符
const styleLinks = document.querySelectorAll('link[rel="stylesheet"]');
styleLinks.forEach(link => {
  if (link.href.includes('__DYNAMIC_PUBLIC_PATH__')) {
    link.href = link.href.replace('__DYNAMIC_PUBLIC_PATH__', dynamicPublicPath);
  }
});

这种方式既保留了CSS提取的性能优势，又能实现动态路径调整。

3. 用SCSS变量配合CSS自定义属性动态控制路径

如果你的图片路径是在SCSS里用变量定义的，可以用更灵活的方式绕开Webpack的限制：

• 在SCSS里用统一变量定义图片路径，同时引用CSS自定义属性作为 fallback：

$asset-root: var(--dynamic-asset-root, '/assets/');
.bg-image {
  background-image: url(#{$asset-root}bg.png);
}

• 运行时通过JS修改根元素的自定义属性值：

document.documentElement.style.setProperty('--dynamic-asset-root', '你的动态资源根路径');

这种方式完全脱离Webpack的publicPath逻辑，适配性更强。

总结 #

Angular CLI 1.7.x的CSS提取逻辑变化是核心原因，选哪种方案看你的项目需求：要快速解决就禁用CSS提取，长期维护优先用Webpack动态publicPath，需要更灵活的路径控制就用SCSS变量配合自定义属性。

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