如何从Bootstrap CSS中移除图标包？Webpack编译SCSS场景求助

好问题！既然你已经在使用Font Awesome，完全没必要让Bootstrap的图标包占用额外体积。结合你用bootstrap-sass和Webpack的场景，这里有个简单可靠的解决方法：

核心思路：按需导入Bootstrap组件，跳过图标模块 #

原来全量导入bootstrap的时候，会自动包含glyphicons（Bootstrap图标）相关的样式和字体文件。我们只需要拆分导入，避开图标部分即可：

1. 替换全量导入为按需导入
   先删掉你原来的全量导入语句：

   // 删掉这行
   @import "~bootstrap-sass/assets/stylesheets/bootstrap";
   

   然后换成分步导入Bootstrap的基础模块和你需要的功能组件：

   // 先导入基础变量、混合宏（必须先导入，否则组件会报错）
   @import "~bootstrap-sass/assets/stylesheets/bootstrap/variables";
   @import "~bootstrap-sass/assets/stylesheets/bootstrap/mixins";
   
   // 按需导入你实际用到的Bootstrap组件（示例，根据你的项目需求调整）
   @import "~bootstrap-sass/assets/stylesheets/bootstrap/normalize";
   @import "~bootstrap-sass/assets/stylesheets/bootstrap/grid";
   @import "~bootstrap-sass/assets/stylesheets/bootstrap/forms";
   @import "~bootstrap-sass/assets/stylesheets/bootstrap/buttons";
   @import "~bootstrap-sass/assets/stylesheets/bootstrap/navbar";
   // 关键：绝对不要导入 `bootstrap/glyphicons` 这个模块！
   

2. 验证效果
   重新用Webpack编译后，检查生成的CSS文件和打包资源，你会发现Bootstrap的图标样式、字体文件（比如.woff、.ttf）都不会出现在打包产物里了。

额外优化提示 #

这种按需导入的方式不仅能移除图标，还能进一步精简Bootstrap的体积——只打包你真正用到的组件，对项目加载速度也有帮助。如果之后需要新增Bootstrap功能，直接添加对应的组件导入即可。

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