Angular 7项目中如何让CLI不修改CSS文件里的URL路径？

我之前在Angular 7项目里也碰到过一模一样的问题——CLI构建时总是自动改CSS里的图片URL，搞得我头疼了好一阵。其实这是Angular默认的资源优化机制：它会把CSS中url()引用的资源复制到输出目录，再更新URL指向新位置。如果你就是想保留自己写的路径，有几个实用的办法：

方案1：让Webpack直接忽略该URL的处理 #

在CSS的url()里加个特殊注释，告诉Webpack（Angular CLI的底层依赖）不要解析这个路径，直接保留原字符串：

.logo { 
  background-image: url(/* webpackIgnore: true */ './src/assets/image/logo.png'); 
}

⚠️ 注意：这么做的话，你得确保部署后./src/assets/image/logo.png这个路径真的有图片。如果CLI现在把图片移到了根目录，你可以调整angular.json的assets配置，让图片输出到对应路径：
打开angular.json，找到projects.[你的项目名].architect.build.options.assets数组，添加下面这段配置：

{
  "glob": "logo.png",
  "input": "src/assets/image",
  "output": "src/assets/image"
}

这样构建后，图片会被复制到dist/src/assets/image/logo.png，和你CSS里写的路径完全匹配。

方案2：用--deploy-url统一指定资源根路径 #

如果你希望所有资源的URL都基于某个固定根路径，并且CLI修改后的URL和你原本写的一致，可以在构建命令里加--deploy-url参数：

ng build --deploy-url /src/assets/image/

这样CLI会把CSS里的URL修改为/src/assets/image/logo.png，和你最初写的路径完全一致。如果你的项目是部署在子目录下，只要调整--deploy-url的参数值就行。

方案3：自定义Webpack配置（进阶玩法） #

如果需要全局控制资源的处理规则，你可以给Angular CLI加自定义Webpack配置。不过这个需要安装额外依赖，适合对Webpack有基础了解的同学：

1. 先安装依赖包：

npm install @angular-builders/custom-webpack --save-dev

2. 在项目根目录创建custom-webpack.config.js文件，添加规则指定图片的输出路径：

module.exports = {
  module: {
    rules: [
      {
        test: /logo.png$/,
        type: 'asset/resource',
        generator: {
          filename: 'src/assets/image/[name][ext]' // 强制图片输出到这个路径
        }
      }
    ]
  }
};

3. 修改angular.json里的构建配置，换成自定义Webpack builder：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./custom-webpack.config.js"
      },
      // 保留你原来的其他配置...
    }
  }
}

这样CLI就会按照你指定的路径输出图片，同时CSS里的URL也会被修改成对应路径（和你原本写的一致）。

另外多说一句：如果你的需求只是让图片能正常访问，而非必须保留CSS里的原URL，其实Angular默认的处理是合理的。你可以检查下angular.json的assets配置，要是里面把图片的output设成了./，就会导致图片被移到根目录。把output改成assets/image，图片就会输出到dist/assets/image/logo.png，CLI也会自动把CSS里的URL改成正确的相对路径，这样部署后就能正常访问了。

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