Angular 18与Karma构建兼容的SCSS相对路径配置方案

方案1：通过环境变量动态切换路径 #

利用Sass变量结合不同构建环境的配置，让路径在esbuild和webpack（Karma）下都能正确解析：

1. 在src/assets/styles目录下创建_path-variables.scss文件，定义基础路径变量：

$asset-path: 'assets/images/'; // 默认适配esbuild

2. 在angular.json中，分别为应用构建和Karma测试配置不同的Sass变量：

   • 针对应用构建（@angular-devkit/build-angular:application）：

     "projects": {
       "your-project": {
         "architect": {
           "build": {
             "options": {
               "stylePreprocessorOptions": {
                 "includePaths": ["src/assets/styles"],
                 "additionalData": "$asset-path: 'assets/images/';"
               }
             }
           }
         }
       }
     }
     

   • 针对Karma测试：

     "projects": {
       "your-project": {
         "architect": {
           "test": {
             "options": {
               "stylePreprocessorOptions": {
                 "includePaths": ["src/assets/styles"],
                 "additionalData": "$asset-path: '~/src/assets/images/';"
               }
             }
           }
         }
       }
     }
     

3. 在SCSS文件中统一使用变量引用图片：

.btn-left-menu {
  background-image: url(#{$asset-path}btn-left-menu.png);
}

方案2：给Karma的webpack配置添加路径别名 #

修改karma.config.js，为webpack添加resolve别名，让assets/路径指向项目的src/assets目录，和esbuild的解析逻辑对齐：

const path = require('path');

module.exports = function (config) {
  config.set({
    // ...其他已有配置
    webpack: {
      resolve: {
        alias: {
          'assets': path.resolve(__dirname, 'src/assets')
        }
      }
    }
  });
};

配置完成后，SCSS中直接使用url('assets/images/btn-left-menu.png')即可，Karma的webpack会自动将assets/解析到src/assets，和esbuild的行为一致，无需修改现有代码。

方案3：使用严格对应目录的相对路径（备选） #

如果上述方案不适用，可以使用从SCSS文件到assets目录的精确相对路径。比如你的SCSS文件在src/app/xxx/下，正确的相对路径应为../../assets/images/btn-left-menu.png，但这种写法需要严格匹配目录结构，后续调整目录时需同步修改路径。

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