Webpack5打包后FontAwesome代码未进入CSS bundle出现内联style标签问题

数据老陈

2026-10-6

问题根因

你当前引入的是FontAwesome的JS版本，该版本默认会在页面运行时动态注入包含图标样式的内联<style>标签，这一行为和你Webpack的CSS抽离配置无关。

解决方案（推荐）

改用FontAwesome的SCSS版本引入，所有样式会被你的现有配置自动抽离到独立CSS bundle中，完全消除内联样式：

删除main.js中原有FontAwesome JS相关引入代码：

// 删掉以下4行代码
import '@fortawesome/fontawesome-free/js/fontawesome'
import '@fortawesome/fontawesome-free/js/solid'
import '@fortawesome/fontawesome-free/js/regular'
import '@fortawesome/fontawesome-free/js/brands'

在你的./scss/style.scss文件头部引入FontAwesome的SCSS资源：

// 引入FontAwesome核心样式
@import '@fortawesome/fontawesome-free/scss/fontawesome';
// 按需引入对应图标集
@import '@fortawesome/fontawesome-free/scss/solid';
@import '@fortawesome/fontawesome-free/scss/regular';
@import '@fortawesome/fontawesome-free/scss/brands';

无需修改现有Webpack配置，重新打包即可生效，所有FontAwesome样式会被统一打包到你输出的static/css/portal.bundle.css文件中，不会再出现内联style标签。

备选方案（保留JS版引入）

如果你必须使用JS版本的FontAwesome，可关闭其自动注入样式的开关，再手动引入样式即可：

在main.js的FontAwesome引入前添加配置：

import { config } from '@fortawesome/fontawesome-free';
// 关闭自动注入内联样式功能
config.autoAddCss = false;

// 原有引入逻辑保留
import "@fortawesome/fontawesome-free/js/fontawesome";
import "@fortawesome/fontawesome-free/js/solid";
import "@fortawesome/fontawesome-free/js/regular";
import "@fortawesome/fontawesome-free/js/brands";
import "./scss/style.scss";