如何在NextJS Config File中将多个加载程序(CSS，更少，TTF等)组合在一起

Question

我正在努力使用nextJ和根据文档将React应用程序移动到SSR，我正在使用CSS，而下一步则更少。问题在于，似乎一次只能起作用。

某些应用程序目前仍然依赖Bootstrap，而且我无法让Bootstrap(CSS或更少(与这些装载机一起使用。主要问题是在引导程序样式表中引用了.ttf，.svg，.gif等的文件，但加载程序不在下一个模块中。

这是我想处理的代码的一般想法：

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 I需要帮助配置我的下一个应用程序以支持一次加载多个文件类型

任何帮助都非常感谢！

Answer 1

我也在寻找答案，并在下一个文档中找到它：

：

可以将多种配置与功能结合在一起 作品。例如：

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
  }
}))

`

Answer 2

组合功能当前无法正常工作，您需要@zeit/next-css@canary和next@canary。并且分别添加配置并不方便。

https://github.com/zeit/next-plugins/issues/241

---

next-compose-plugins可能是一个更好的选择：

https://www.npmjs.com/package/next-compose-plugins