如何组合和使用多个 Next.js 插件 [英] How to combine and use multiple Next.js plugins

问题描述

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

I would like to use css and scss in next.jsapp.

我的项目中有 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'); 与我当前的配置结合起来.

I don't know how to combine const withCSS = require('@zeit/next-css'); with my current config.

我想为 scss 使用自定义配置(来自我的代码片段).

I would like to use custom config for scss (from my code snipet).

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

Can someone help me configure next for css and scss modules?

我试过了:

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

不工作...

推荐答案

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

You can use next-compose-plugins and combine multiple next.js plugins as follows:

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

这篇关于如何组合和使用多个 Next.js 插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！