NextJS에서 antd less파일 이용하기

NextJS 11 버전으로 변경되며 기존에 사용하던 @zeit/next-less를 사용한 Webpack Config코드에 문제가 생겼다.

이에 대한 해결 방법을 공유한다.

 

먼저 종속성을 다운 받아준다.

npm i antd next-plugin-antd-less less less-loader

그런 뒤 파일들을 수정해 준다.

 

//next.config.js

const withAntdLess = require('next-plugin-antd-less');

module.exports = withAntdLess({
  lessVarsFilePath: './styles/custom.less',
  lessVarsFilePathAppendToEndOfContent: true,
  cssLoaderOptions: {},

  webpack(config) {
    return config;
  },
});

// .babelrc

{
  "presets": ["next/babel"],
  "plugins": [["import", { "libraryName": "antd", "style": true }]]
}

여기서 나의 경우 lessVarsFilePathAppendToEndOfContent 이 옵션을 사이트의 예제대로 false로 설정했었지만 이 옵션을 켜야 해당 파일의 커스텀 less 속성들이 적용이 되었다.

 

이렇게 설정을 마치고 _app.js에서 less를 불러와 사용한다.

import '@styles/antd.less';