Angular6/SCSS项目中第三方CSS相对路径图片适配方案问询

嘿，我之前也处理过类似的需求——第三方样式用相对路径引用图片，还不能改他们的文件，每次更新还要保证路径正常。结合你的项目结构，给你两个靠谱的方案，优先用第一个，简单直接：

方案一：靠Angular Assets配置+正确导入解决（推荐） #

第一步：让Angular帮你复制第三方图片 #

首先得确保Angular构建的时候，能把第三方的图片打包到输出目录里。打开你的angular.json，找到项目配置里的architect -> build -> options -> assets数组，加一段配置：

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "src/third-party/images",
    "output": "third-party/images/"
  }
]

这段配置的意思是：把src/third-party/images下所有文件，原封不动复制到dist/third-party/images/里，这样图片就会在正确的位置等着被调用。

第二步：正确导入第三方SCSS #

在你的主样式文件src/styles.scss里，用相对路径导入第三方的样式文件就行：

// 直接导入第三方的通用样式
@import './third-party/styles/general.scss';

// 如果第三方有统一的入口文件（比如你说的import.scss），导入这个更方便
@import './third-party/import.scss';

为啥这样能行？

SCSS编译的时候会自动计算相对路径：第三方样式里的url('../images/logo.png')是相对于它自己的位置（src/third-party/styles/general.scss），指向的是src/third-party/images/logo.png。等编译输出到dist/styles/目录时，SCSS会自动把路径转换成../third-party/images/logo.png——刚好对应我们刚才复制到dist里的图片位置，浏览器就能正常加载了。

方案二：用PostCSS强制重写路径（备选） #

如果第一种方案因为第三方样式的路径逻辑太复杂不生效，可以试试用PostCSS来硬改路径：

1. 先装插件：

npm install postcss-url --save-dev

2. 在项目根目录建个postcss.config.js文件：

module.exports = {
  plugins: {
    'postcss-url': {
      url: (asset) => {
        // 把第三方的../images/开头的路径，替换成绝对路径
        if (asset.url.startsWith('../images/')) {
          return `/third-party/images/${asset.url.replace('../images/', '')}`;
        }
        return asset.url;
      }
    }
  }
};

3. 最后在angular.json里启用PostCSS：
   找到architect -> build -> options，加一行：

"postcss": "./postcss.config.js"

这样构建的时候，PostCSS会自动把第三方样式里的图片路径替换成正确的绝对路径，不管原来的相对路径怎么写，都能指向正确的位置。

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