Angular v17第三方包@use语句含波浪线~的构建错误解决方法

第三方SCSS文件中使用的~@thirdparty路径是旧版webpack/sass-loader的写法，Angular v17默认使用的esbuild构建工具不支持该语法，导致字体文件无法解析。以下是几种无需修改node_modules的解决方案：

方案1：配置Sass自定义路径解析器 #

在angular.json的项目构建配置中，添加Sass自定义importer，自动替换波浪线路径：

"build": {
  "builder": "@angular-devkit/build-angular:application",
  "options": {
    // 其他配置项
    "stylesPreprocessorOptions": {
      "includePaths": ["node_modules"],
      "sassOptions": {
        "importer": [
          function(url) {
            if (url.startsWith('~@thirdparty')) {
              return { file: url.replace('~', 'node_modules/') };
            }
            return null;
          }
        ]
      }
    }
  }
}

该配置会将所有~@thirdparty开头的路径替换为node_modules/@thirdparty，让Sass能正确定位字体文件。

方案2：用PostCSS插件替换路径 #

通过PostCSS插件批量修改SCSS中的波浪线路径：

1. 安装依赖：

npm install postcss-url --save-dev

2. 项目根目录创建postcss.config.js：

module.exports = {
  plugins: [
    require('postcss-url')({
      url: (asset) => {
        if (asset.url.startsWith('~@thirdparty')) {
          return asset.url.replace('~', 'node_modules/');
        }
        return asset.url;
      }
    })
  ]
};

3. 在angular.json中启用PostCSS：

"build": {
  "options": {
    // 其他配置项
    "postcssConfig": "postcss.config.js"
  }
}

方案3：本地覆写第三方SCSS文件 #

创建本地SCSS文件复制第三方包的样式内容，手动去掉波浪线后引入：

1. 在src/styles下创建magic-font-override.scss：

@font-face {
  font-family: 'A magic font';
  // 保留原其他属性
  src: url('@thirdparty/magic/dist/assets/fonts/a-magic-font.woff') format('woff2');
}
// 复制第三方包中其他SCSS内容

2. 修改styles.scss引入本地文件：

// @use '@thirdparty/magic/src/styles/magic-font'; // 注释原引入
@use './styles/magic-font-override';

注意：后续第三方包版本更新时，需要同步覆写文件的内容。

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