Angular CLI 6开发模式下背景图片路径异常的解决咨询

我之前也踩过Angular CLI这个路径解析的坑，尤其是在开发模式下，不同文件夹里的同名背景图全被解析成同一个文件名，导致样式混乱。给你几个实用的解决思路：

1. 确保angular.json中assets配置完整保留子文件夹结构 #

Angular CLI默认会复制assets目录到输出目录，但如果配置只写了"src/assets"，它可能会把所有文件平铺到输出的assets根目录下，导致路径丢失。你需要修改assets配置，强制保留子文件夹结构：

"architect": {
  "build": {
    "options": {
      "assets": [
        "src/favicon.ico",
        {
          "glob": "**/*",
          "input": "src/assets/",
          "output": "/assets/"
        }
      ]
    }
  }
}

这样配置后，CLI会完整复制src/assets下的所有子文件夹和文件到输出目录的assets文件夹，开发模式下就能正确解析url(assets/folder1/x.png)这类路径了。

2. 使用根相对路径引用图片 #

在Sass代码里给路径加上开头的斜杠，强制从项目根目录开始解析：

background-image: url(/assets/folder1/x.png);
background-image: url(/assets/folder2/x.png);

这种方式可以绕过CLI默认的路径简化处理，直接指向正确的资源位置，前提是你已经在angular.json里正确配置了assets目录。

3. 自定义Webpack配置调整资源加载规则 #

如果上面的方法都不生效，你可以直接修改底层的Webpack配置，调整file-loader的命名规则，让它保留原路径。Angular CLI 6.x需要借助@angular-builders/custom-webpack插件来扩展配置：

首先安装插件：

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

然后创建custom-webpack.config.js文件：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]', // 保留原路径和文件名
              outputPath: 'assets/',
              publicPath: '/assets/'
            }
          }
        ]
      }
    ]
  }
};

最后修改angular.json中的builder配置，指定使用自定义Webpack：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./custom-webpack.config.js"
      },
      // 其他原有配置...
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    // 其他原有配置...
  }
}

这样开发模式下Webpack就会按照你指定的规则处理图片路径，不会再截断子文件夹部分。

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