-
NextJS에서 antd less파일 이용하기Next.js 2021. 7. 27. 17:13728x90
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';
'Next.js' 카테고리의 다른 글
NextJS Image에서 fallback 활용하기 (0) 2021.09.16 NextJS Firebase@9으로 migration하기 (0) 2021.09.14 NextJS 외부라이브러리 Error : document(or window) is not defined 해결하기 (0) 2021.09.06 NextJS Image Tag Error: Invalid src prop 해결하기 (0) 2021.09.06 NextJS 11버전에서 next Image 태그 사용하기 (0) 2021.08.09