reactjs - 如何在 NextJS 配置文件中组合多个加载器(CSS、LESS、ttf 等)？

Question

我正在使用 NextJS 将 React 应用程序移动到 SSR，并且根据文档，我正在使用 CSS 和 LESS modules下一步。问题是似乎一次只有一个工作。

一些应用程序目前仍然依赖于 Bootstrap，并且我无法让 Bootstrap(CSS 或 LESS)与这些加载器一起使用。主要问题是 Bootstrap 样式表中引用了 .ttf、.svg、.gif 等文件，但加载器不在 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

另外，我尝试破解 module 中使用的 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 我需要帮助配置我的 Next 应用以支持一次加载多种文件类型

非常感谢任何帮助!

Answer 1

我也在寻找这个问题的答案，并在 the Next.js documentation 中找到了它。其中提到:

Multiple configurations can be combined together with function composition. For example:

const withTypescript = require('@zeit/next-typescript')`
const withSass = require('@zeit/next-sass')`

module.exports = withTypescript(withSass({
  webpack(config, options) {
    // Further custom configuration here
    return config
  }
}))

`