如何在 next.config 中添加两个以上的插件.js.

Question

我想在我们公司的项目中实现 sass 和 BEM 方法，但是，我在将 sass 插件添加到现有代码中几乎没有问题。目前，我们正在使用打字稿和CSS插件。

const path = require('path')
const withTypescript = require('@zeit/next-typescript')
const withCSS = require('@zeit/next-css')
const withSass = require('@zeit/next-sass');
const configuration = require('./config/configuration.json')
module.exports = withTypescript(
  withCSS({
      webpack(config) {
        if (process.env.ANALYZE) {
          config.plugins.push(new BundleAnalyzerPlugin({
            analyzerMode: 'server',
            analyzerPort: 8888,
            openAnalyzer: true,
          }))
        }
        return config
      },
      cssModules: true,
      serverRuntimeConfig: { 
        // Will only be available on the server side
      },
      publicRuntimeConfig: { 
        // Will be available on both server and client
      }
    })
  )

我想添加 sass 插件，但在实现 sass 时仍然无法处理该项目。

Answer 1

以下是添加更多插件的方法。

在您的webpack(config) { /* ... */ }函数中，您可以不断将更多插件推送到config.plugins中。

例如，在这里我添加了分析构建脚本的WebpackBar插件。

webpack(config) {
    if (process.env.ANALYZE) {
        config.plugins.push(new BundleAnalyzerPlugin({
            analyzerMode: 'server',
            analyzerPort: 8888,
            openAnalyzer: true,
        }))
    }
    config.plugins.push(new WebpackBar({
        fancy: true,
        profile: true,
        basic: false,
    }));
    // just do as many config.plugins.push() calls as you need
    return config
},