bootstrap scss webpack 引用icons

Bootstrap SCSS是基于Sass版本的Twitter Bootstrap，它提供了一个更易于定制的CSS框架。Webpack则是一个模块打包工具，常用于前端项目构建，它将项目中的各种依赖文件打包成一个或多个优化后的文件。

在Webpack项目中引用Font Awesome等图标库（如Icons），你需要遵循以下步骤：

1. 首先，安装Font Awesome的SCSS版本：

   npm install font-awesome --save
   npm install sass-loader node-sass --save-dev

2. 将Font Awesome添加到你的SCSS文件中：

   @import 'font-awesome/scss/all';

3. 在Webpack配置文件`webpack.config.js`里设置Sass loader，例如使用`@vue/cli-service`的话，可以在`vue.config.js`里做这个设置：

   module.exports = {
     // ...
     chainWebpack: config => {
       config.module
         .rule('scss')
           .test(/\.s[ac]ss$/i)
           .use('sass-loader')
             .loader('sass-loader')
             .options({
               includePaths: [path.resolve(__dirname, 'node_modules')],
             });
     },
   };

4. 现在你可以在`.scss`文件中像这样使用Font Awesome的图标了：

   .my-icon {
     font-family: 'Font Awesome 5 Free', sans-serif;
     content: "\f007"; /* 举个例子，这里使用Font Awesome的‘搜索’图标 */
   }