인프런 커뮤니티 질문&답변

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를 어떤 식으로 설정해야 될까요?