如果scss引用了字体图标文件该怎么打包

如果scss引用了字体图标文件该怎么打包

之前我试了，用url-loader和file-loader并没有效果。

主要是scss-loader没有url重写的功能。

解决方法也很简单

安装resolve-url-loader，这个loader放在sass-loader之前

在sass-loader添加参数options: { sourceMap: true }

以下是webpack.config.js的loader配置的代码

module: {
    rules: [
      
      {
        test: /.scss$/,
        use: [
          MiniCssExtractPlugin.loader,  //这个是抽离css的，和题目没啥关系
          {
            loader: 'css-loader'
          },
          {
            loader: "resolve-url-loader"  //加上这个
          },
          {
            loader: "sass-loader", // 将 Sass 编译成 CSS
            options: { sourceMap: true }  //加上这个
          }
        ]
      },
      {
        test: /.(woff|woff2?|svg|ttf|eot)$/,
        use:[
             {loader:'file-loader',options:{outputPath: 'iconfont'}}//项目设置打包到dist下的fonts文件夹下
          ]
      }
    ]
  }