Webpack 5 引入Bootstrap依赖后SCSS文件编译失败问题求助

问题根因 #

报错核心由两个配置问题导致：

1. sass加载规则排除了整个node_modules目录，你引入的Bootstrap SCSS文件存放在node_modules下，未被sass-loader编译，原始SCSS语法直接进入PostCSS处理环节无法被识别，触发解析错误。
2. postcss-preset-env内置的postcss-custom-properties插件版本较低，无法兼容Bootstrap 5使用的新版CSS变量语法，进一步触发语法解析报错。

解决方案 #

按以下步骤修改配置即可解决：

• 第一步：修改./rules/sass.js中的exclude配置，放行Bootstrap相关的SCSS文件：
  将原有配置中的exclude: /node_modules/,替换为：

exclude: /node_modules(?!\/bootstrap)/,

该配置仅排除node_modules中除Bootstrap外的其他文件，保证Bootstrap的SCSS代码能被sass-loader正常编译为标准CSS。

• 第二步：调整PostCSS插件配置，关闭不兼容的custom-properties特性，修改postcssOptions中的plugins配置项：

plugins: [
    require('postcss-preset-env')({
        features: {
            'custom-properties': false
        }
    }),
    require('postcss-url'),
    require('autoprefixer')
]

如果后续需要CSS变量降级兼容低版本浏览器，可单独安装最新版的postcss-custom-properties插件替换内置版本即可。

• 可选优化：可将外部CDN引入的bootstrap-icons代码挪到HTML的head标签中引入，避免样式编译环节处理外部资源请求，减少编译复杂度。

配置修改完成后，删除node_modules/.cache缓存目录，重新执行编译命令即可正常生成包含Bootstrap样式的CSS文件。如果仍有报错，可将postcss、postcss-preset-env、sass-loader升级到最新稳定版，消除版本兼容性问题。

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