next.config.js 에러 질문입니다

Question

이번에 next + antd 로 진행하다가 antd customize theme를 써보고싶어져서 https://ant.design/docs/react/customize-theme#Customize-in-webpack 여기에 나와있는대로 웹팩 설정을 const   withBundleAnalyzer   =   require ( ' @next/bundle-analyzer ' )({    enabled :   process . env . ANALYZE   ===   ' true ' , }) ; module . exports   =   withBundleAnalyzer ({    compress :   true ,    webpack ( config ,   {   webpack   } )   {      const   prod   =   process . env . NODE_ENV   ===   ' production ' ;      config . module . rules . push ({        test :   / \. less $ / ,        use :  [         {            loader :   ' style-loader ' ,         } ,         {            loader :   ' css-loader ' ,   // translates CSS into CommonJS         } ,         {            loader :   ' less-loader ' ,   // compiles Less to CSS            options :  {              lessOptions :  {                // If you are using less-loader@5 please spread the lessOptions to options directly                modifyVars :  {                  ' primary-color ' :   ' #1DA57A ' ,                  ' link-color ' :   ' #1DA57A ' ,                  ' border-radius-base ' :   ' 2px ' ,               } ,                javascriptEnabled :   true ,             } ,           } ,         } ,       ] ,     }) ;      return  {        ... config ,        mode :   prod   ?   ' production '   :   ' development ' ,        devtool :   prod   ?   ' hidden-source-map '   :   ' eval ' ,        plugins :  [ ... config . plugins ,   new   webpack . ContextReplacementPlugin ( / moment [/ \ ] locale $ / ,   / ^ \./ ko $ / )] ,     } ;   } , }) ; 이렇게 기존에서 less 설정만 추가했습니다. 그런데  > next -p 3080 Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db ready - started server on http://localhost:3080 Warning: Reverting webpack devtool to 'inline-source-map'. Changing the webpack devtool in development mode will cause severe performance regressions. Read more: https://err.sh/next.js/improper-devtool Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected. See here for more info: https://err.sh/next.js/built-in-css-disabled info  - Using external babel configuration from E:\programming
odejs\utopia\client\.babelrc error - ./node_modules/antd/dist/antd.css 13:6 Module parse failed: Unexpected token (13:6) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | /* stylelint-disable */ | /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */ > [class^=ant-]::-ms-clear, | [class*= ant-]::-ms-clear, | [class^=ant-] input::-ms-clear, 이런 오류가 뜹니다. custom css configuration 을  해서 built in css support가 중단되었다고하는거 같은데, 해당 링크에 들어가보면 외부 css 관련 플러그인을 사용했을때 뜰 수 있다라고 하는데 그 상황은 아닌거같고요. 혹시 어떻게 해야 웹팩 오류가 안나게 설정을 할 수 있을까요?

1ncursio · Answer

해결했습니다. less-loader에 jsEnabled가 deprecated 되었다네요. 다른 방식으로 적용했습니다