Angular 12升级至17后sass-loader/Bootstrap样式导入失败求助

问题本质 #

Angular 17配套的sass-loader路径解析逻辑和旧版本有差异，你已经配置stylePreprocessorOptions.includePaths指向node_modules，但第三方库@tes/css-framework里的导入语句带了node_modules前缀，导致路径重复，Sass无法找到对应文件。

具体解决办法 #

1. 修改第三方库的导入路径（有权限修改时优先使用） #

找到node_modules\@tes\css-framework\sass\libs\bootstrap\_style.scss文件，把第一行的导入语句修改为：

@import 'bootstrap/scss/functions';

因为已经配置了includePaths指向node_modules，Sass会自动在该目录下查找目标文件，无需再加node_modules前缀。

2. 无法修改第三方库时的替代方案 #

方案A：扩展includePaths搜索范围

在angular.json的stylePreprocessorOptions中，把bootstrap/scss目录直接加入搜索路径：

"stylePreprocessorOptions": {
    "includePaths": [
        "node_modules",
        "node_modules/bootstrap/scss"
    ]
}

之后不管是项目代码还是第三方库中，直接写@import 'functions';即可找到文件，不过需要同步调整所有相关的导入语句。

方案B：用Webpack别名映射路径（推荐）

1. 安装自定义Webpack构建工具：

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

2. 在项目根目录新建webpack.config.js，添加路径别名映射：

module.exports = {
    resolve: {
        alias: {
            'node_modules/bootstrap/scss': 'bootstrap/scss'
        }
    }
};

3. 修改angular.json中的构建配置，改用自定义Webpack builder：

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

3. 检查依赖版本兼容性 #

• 确保bootstrap使用v5.x及以上版本，适配Angular 17的构建链；
• 如果sass-loader存在版本冲突，重新安装适配版本：

npm uninstall sass-loader
npm install sass-loader --save-dev

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