如何组合和使用多个 Next.js 插件

Posted 2023-02-22

【中文标题】如何组合和使用多个 Next.js 插件

【英文标题】：How to combine and use multiple Next.js plugins

【发布时间】：2020-05-27 09:23:48

【问题描述】：

我想在next.jsapp 中使用css 和scss。

我的项目中有next.config.js。

此配置适用于scss：

// next.config.js
const withSass = require('@zeit/next-sass');

module.exports = withSass(
    cssModules: true,
    cssLoaderOptions: 
        importLoaders: 1,
        localIdentName: "[local]___[hash:base64:5]",
    
)

我不知道如何将const withCSS = require('@zeit/next-css'); 与我当前的配置结合起来。

我想为scss 使用自定义配置（来自我的代码片段）。

谁能帮我配置下一个css 和scss 模块？

我试过了：

// // next.config.js
const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');

module.exports = withCSS(withSass(
    cssModules: true,
    cssLoaderOptions: 
        importLoaders: 1,
        localIdentName: "[local]___[hash:base64:5]",
    
))

不工作...

【参考方案1】：

你可以使用next-compose-plugins，组合多个next.js插件如下：

// next.config.js
const withPlugins = require('next-compose-plugins');
const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');

module.exports = withPlugins(
  [
    [withSass,  /* plugin config here ... */ ],
    [withCSS,   /* plugin config here ... */ ],
  ],
  
    /* global config here ... */
  ,
);

【讨论】：

没有 compose 库怎么办？

【参考方案2】：

这也可以很容易地完成没有 next-compose-plugins 库。

这也可以说是更清楚一点：

// next.config.js
const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');

module.exports = (phase,  defaultConfig ) => 
  const plugins = [
    withSass( /* Plugin config here ... */ ),
    withCSS( /* Plugin config here ... */ ),
  ];
  return plugins.reduce((acc, next) => next(acc), 
    /* global config here ... */
  );
;

我在这里抱怨时发现了这一点：Source