如何在 next.config.js 中结合这两个语句进行部署答案

【问题标题】：How can I combine these 2 statements in next.config.js for deployment如何在 next.config.js 中结合这两个语句进行部署
【发布时间】：2019-11-18 00:16:32
【问题描述】：

我正在将 Nextjs 应用程序部署到 Zeit，但根据它要求添加的文档

module.exports = {
  target: 'serverless'
}

如在 next.config.js 中

但我的文件已经包含一个 module.export

const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  webpack: function (config) {
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: '[name].[ext]'
        },
      },   
    },
    )
    return config
  }
},

)

如何将这些导出合并为一个。请帮帮我！

我尝试按照本期https://github.com/zeit/next-plugins/issues/34 和https://github.com/zeit/next-plugins/issues/7 中的建议进行操作

但是 withCSS({}) 没有例子

【问题讨论】：

标签： webpack next.js

【解决方案1】：

你应该能够像这样组合它们：

const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  target: 'serverless',
  webpack: function (config) {
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: '[name].[ext]'
        },
      },   
    },
    )
    return config
  }
})

【讨论】：

【解决方案2】：

使用这个可爱的插件https://github.com/JerryCauser/next-compose 结合

例如：

const withTS = require('@zeit/next-typescript')
const withSass = require('@zeit/next-sass')
const compose = require('next-compose')

const tsConfig = {/** ts config here */}
const sassConfig = {/** sass config here */}

module.exports = compose([
  [withTS, tsConfig],
  [withSass, sassConfig],
  {
    webpack: (config) => {
      /**some special code */
      return config
    }
  }
])

【讨论】：