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

IT技术 css reactjs sass next.js
2021-04-18 13:59:40

我想在应用程序中使用css和。scssnext.js

我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和scssmodule？

我试过： 

// // 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]",
    }
}))

不工作...

2个回答

您可以使用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 库，如何做到这一点？
2021-05-30 13:59:40

这也可以很容易地进行，而不该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 ... */
  });
};

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

其它你可能感兴趣的问题
上一篇如何在 react.js 中收听 localstorage 下一篇react本机重复资源