如何在NextJS配置文件中组合多个加载器（CSS，LESS，ttf等）？

我正在使用NextJS将React应用程序移至SSR，并且根据文档，我将CSS和LESS 模块用于Next。问题在于，似乎一次只能工作一个。

目前，某些应用仍依赖于Bootstrap，并且我无法使Bootstrap（CSS或LESS）与这些加载程序一起使用。主要问题是在Bootstrap样式表中引用了.ttf，.svg，.gif等文件，但Loader不在Next模块中。

这是我要对代码执行的一般性想法：

App.js

import React, {Component} from "react"
import "../node_modules/bootstrap/less/bootstrap.less"
import "../less/landing/foo.less"
import "../less/landing/bar.less"

...

next.config.js（来自docs）

const withLess = require('@zeit/next-less')
module.exports = withLess()

样本误差

 error  in ./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2

Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

 @ ./node_modules/css-loader?{"modules":false,"minimize":false,"sourceMap":true,"importLoaders":1}!./node_modules/bootstrap/dist/css/bootstrap.css 7:4645-4699
 @ ./node_modules/bootstrap/less/bootstrap.less
 @ ./pages/App.js
 @ ./pages/index.js
 @ multi ./pages/index.js

另外，我尝试破解该模块中使用的Webpack配置，以包括那些加载程序，但是我没有任何运气。

next.config.js

const ExtractTextPlugin = require('extract-text-webpack-plugin')
const cssLoaderConfig = require('@zeit/next-css/css-loader-config')

withLess = (nextConfig = {}) => {
  return Object.assign({}, nextConfig, {
    webpack(config, options) {
      if (!options.defaultLoaders) {
        throw new Error(
          'This plugin is not compatible with Next.js versions below 5.0.0 https://err.sh/next-plugins/upgrade'
        )
      }

      const { dev, isServer } = options
      const { cssModules } = nextConfig
      // Support the user providing their own instance of ExtractTextPlugin.
      // If extractCSSPlugin is not defined we pass the same instance of ExtractTextPlugin to all css related modules
      // So that they compile to the same file in production
      let extractCSSPlugin =
        nextConfig.extractCSSPlugin || options.extractCSSPlugin

      if (!extractCSSPlugin) {
        extractCSSPlugin = new ExtractTextPlugin({
          filename: 'static/style.css'
        })
        config.plugins.push(extractCSSPlugin)
        options.extractCSSPlugin = extractCSSPlugin
      }

      if (!extractCSSPlugin.options.disable) {
        extractCSSPlugin.options.disable = dev
      }

      options.defaultLoaders.less = cssLoaderConfig(config, extractCSSPlugin, {
        cssModules,
        dev,
        isServer,
        loaders: ['less-loader']
      })

      config.module.rules.push({
        test: /\.less$/,
        use: options.defaultLoaders.less
      })

      // ------ start of my custom code --------
      config.module.rules.push({ 
          test: /\.gif$/, 
          use: [{loader: "url-loader?mimetype=image/png" }]
      })

      config.module.rules.push({
          test: /\.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/, 
          use: [{loader: "url-loader?mimetype=application/font-woff"}]
      })

      config.module.rules.push({
          test: /\.(ttf|eot|svg)(\?v=[0-9].[0-9].[0-9])?$/, 
          use: [{loader: "file-loader?name=[name].[ext]"}]
      })
      // ------ end ---------

      if (typeof nextConfig.webpack === 'function') {
        return nextConfig.webpack(config, options)
      }

      return config
    }
  })
}

module.exports = withLess()

TL; DR我需要帮助配置我的下一个应用程序以支持一次加载多种文件类型

任何帮助深表感谢！