Antd / Less and Sass / CSS modules 설정 질문입니다

AOS라는 라이브러리를 사용하고 싶어 cssModule을 사용해야 하는데

 import 'aos/dist/aos.css';

   antd customizing Theme을 위해 @zeit/next-less을 사용한 상태여서 cssModule 사용이 불가능하다고 합니다. 

이런 경우 공식문서(https://github.com/vercel/next-plugins/tree/master/packages/next-less)에서는 

// next.config.js

const withLess = require('@zeit/next-less')

module.exports = withLess({

  cssModules: true,

  cssLoaderOptions: {

    importLoaders: 1,

    localIdentName: "[local]___[hash:base64:5]",

  }

})

이런 식으로 설정하면 된다고 나와있어서 시도해보았지만 여전히 css 파일을 못읽어 module parse error가 나왔습니다.

 그래서 @zeit/next-css를 적용시켜보니 css파일을 읽혀지지만 antd 기본 디자인이 적용되지 않는 문제가 발생했습니다.

 /next.config.js

const withCSS = require('@zeit/next-css');

const withLess = require('@zeit/next-less');

module.exports = withCSS(withLess({

    lessLoaderOptions: {

        javascriptEnabled: true,

    },

    cssModules: true,

    cssLoaderOptions: {

        importLoaders: 3,

        localIdentName: '[local]___[hash:base64:5]'

    },

    distDir: '.next',

    webpack(config, { webpack }) {

        const prod = process.env.NODE_ENV === 'production';

        const newConfig = {

            ...config,

            mode: prod ? 'production' : 'development',

            plugins: [

                ...config.plugins,

                new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /^\.\/ko$/),

            ],

        }

        if (prod) {

            newConfig.devtool = 'hidden-source-map';

        }

        return newConfig;

    },

}));

비슷한 경우가  있어서 따라해보았지만

'How to configure Next.js with Antd / Less and Sass / CSS modules'

 https://stackoverflow.com/questions/61240582/how-to-configure-next-js-with-antd-less-and-sass-css-modules 

이 경우 또한 module parse error가 나왔습니다.

/next.config.js

 const withLess = require('@zeit/next-less');

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

const lessToJS = require('less-vars-to-js');

const fs = require('fs');

const path = require('path');

// Where your antd-custom.less file lives

const themeVariables = lessToJS(

    fs.readFileSync(path.resolve(__dirname, './assets/antd-custom.less'), 'utf8')

);

module.exports = withSass({

    cssModules: true,

    ...withLess({

        lessLoaderOptions: {

            javascriptEnabled: true,

            modifyVars: themeVariables, // make your antd custom effective

            importLoaders: 0

        },

        cssLoaderOptions: {

            importLoaders: 3,

            localIdentName: '[local]___[hash:base64:5]'

        },

        webpack: (config, { isServer }) => {

            //Make Ant styles work with less

            if (isServer) {

                const antStyles = /antd\/.*?\/style.*?/;

                const origExternals = [...config.externals];

                config.externals = [

                    (context, request, callback) => {

                        if (request.match(antStyles)) return callback();

                        if (typeof origExternals[0] === 'function') {

                            origExternals[0](context, request, callback);

                        } else {

                            callback();

                        }

                    },

                    ...(typeof origExternals[0] === 'function' ? [] : origExternals)

                ];

                config.module.rules.unshift({

                    test: antStyles,

                    use: 'null-loader'

                });

            }

            return config;

        }

    })

});

1. antd 기본 스타일을 유지한 채

2. them customizing을 위해 @zeit/next-less을 사용하면서 

3. cssModule 사용도 가능하려면

 next.config.js를 어떤 식으로 설정해야 될까요?