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

Question

我想在 next.js 应用程序中使用 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 的自定义配置(来 self 的代码片段)。

有人可以帮我配置 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]",
    }
}))

不工作...

Answer 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 ... */
  },
);