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

gheemddl

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

antd 커스터마이징

작성

397

antd 홈페이지에 docs에서 coustomize theme의 예제를 보고 antd를 커스터마이징하려고 하는데

1 webpack.config.js가 next에서 next.config.js인가요?

2.next.config.js 설정을 어떻게 해야 하나요?

3 .babelrc에서도 따로 설정해야 되는 것이 있나요?

공식문서를 봐도 이해가 잘 안가서 질문드립니다

react express redux nodejs Next.js

답변 3

제로초(조현영)

지식공유자

lessLoaderOptions는 공식문서에서 확인할 수 없는 부분이긴 한데 웹팩 설정에 넣기보다는 compress 아래에 넣어주시는 게 맞을 것 같습니다.

요즘은 설정이 여러 개 있는 경우 next-compose-plugins을 써서 각각 설정하곤 합니다.

castinglife

저도 궁금했던 부분인데..

아래 처럼 설정을 추가해주면 될까요?

// 두가지를 다 사용할수 있다고 합니다. [ @zeit/next-sass는 기본 지원 ]

npm i less sass @zeit/next-less

next.config.js


const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

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

//  노드에 .less 파일이 필요한 경우 오류 방지
if (typeof require !== 'undefined') {
  require.extensions['.less'] = file => {};
}

module.exports = withBundleAnalyzer(withless({
  compress: true,
  webpack(config, { webpack }) {
    const prod = process.env.NODE_ENV === 'production';
    return {
      ...config,

       lessLoaderOptions: {
            javascriptEnabled: true,
       },

      mode: prod ? 'production' : 'development',
      devtool: prod ? 'hidden-source-map' : 'eval',
      plugins: [
        ...config.plugins,
        new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /^\.\/ko$/),
      ],
    };
  },
}));




_app.js


import React from 'react';
import PropTypes from 'prop-types';
import Head from 'next/head';
// import 'antd/dist/antd.css';
import '../css/antd.less';

import wrapper from '../store/configureStore';

const NodeBird = ({ Component }) => (
  <>
    <Head>
      <meta charSet="utf-8" />
      <title>NodeBird</title>
    </Head>
    <Component />
  </>
);

NodeBird.propTypes = {
  Component: PropTypes.elementType.isRequired,
};

export default wrapper.withRedux(NodeBird);







/css/antd.less

@import '~antd/dist/antd.less';
@primary-color: #c02428;

제로초(조현영)

지식공유자

1. 다른 개념입니다. 단, next에서는 webpack config를 next config 안에 설정합니다.

2. 6강에서 next.config.js 설정하는 강좌까지 다 보신 후 다시 질문해주시면 좋을 것 같습니다. 그 때 antd에 어떤 부분이 적용하기 어려운지 알려주시면 됩니다.

https://github.com/ZeroCho/react-nodebird/blob/master/ch7/front/next.config.js

3. 바벨(.babelrc)도 원래는 따로이지만 next안에서 설정할 수 있습니다.

gheemddl

작성한 질문수

전체 Q&A

질문하기