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

问题描述

我想在next.js app中使用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屋！