Question

我正在努力使用NextJS将React应用程序移动到SSR，并且根据文档，我使用CSS而不是modules用于Next。问题是似乎一次只能有一个工作。

现在有些应用仍然依赖于Bootstrap，我无法使用Bootstrap（CSS或LESS）来处理这些加载器。主要问题是.ttf，.svg，.gif等文件在Bootstrap样式表中引用，但加载器不在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我需要帮助配置我的下一个应用以支持一次加载多种文件类型

非常感谢任何帮助！

Answer 1

我也在寻找答案，并在提及的the Next.js documentation中找到答案：

多种配置可以与功能组合在一起组成。例如：

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

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

2 个答案: