升级Angular CLI至1.7.3后Webpack路径解析错误求助

刚升级Angular CLI到1.7.3就踩了这个路径解析的坑？我之前帮不少开发者处理过类似情况，咱们一步步来搞定它：

问题根源 #

升级后Angular CLI的Webpack资源解析逻辑有调整：当你在app.component.css里引入theme-default.css时，Webpack会以app.component.css所在的src/app目录作为基础路径，去解析theme-default.css里的相对路径（比如../img/filetree/code.png），但实际上这个图片的真实路径是src/assets/img/filetree/code.png，自然就找不到了。

具体解决方案 #

• 方案1：改成绝对路径（最简单直接）
  打开src/assets/css/theme-default.css，把所有类似../img/xxx.png的引用改成/assets/img/xxx.png。绝对路径会让Webpack直接从项目根目录的assets文件夹找资源，完全不受引入位置影响。

• 方案2：用~符号指定资源根目录
  Angular CLI里~可以直接指向src/assets目录，所以把路径改成~assets/img/filetree/code.png就行。这个方法不用纠结相对路径的层级，通用性很强。

• 方案3：检查并调整Angular CLI配置
  1.7.3版本用的是.angular-cli.json（不是后来的angular.json），打开这个文件找到apps数组，确保assets配置包含了你的图片目录：

  "apps": [
    {
      "root": "src",
      "assets": [
        "assets" // 只要包含这个，assets下的所有子目录（包括img）都会被正确识别
      ],
      // 其他配置项...
    }
  ]
  

  修改后重启构建服务，让配置生效。

• 方案4：配置样式预处理器路径别名
  如果不想修改大量CSS路径，可以在.angular-cli.json里添加stylePreprocessorOptions，指定资源目录的搜索路径：

  "apps": [
    {
      // 其他配置...
      "stylePreprocessorOptions": {
        "includePaths": [
          "./src/assets/css",
          "./src/assets/img"
        ]
      }
    }
  ]
  

  之后在theme-default.css里就可以直接写filetree/code.png（因为src/assets/img已经被加入搜索路径），不用再写相对路径了。

另外还要注意：如果是用@import引入theme-default.css，确保app.component.css里的引入路径是正确的，比如应该是@import '../../assets/css/theme-default.css';，别写错层级导致Webpack解析基础路径出错。

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