[Emotion] emotion(with next v12) 세팅 방법

[Emotion] emotion(with next v12) 세팅 방법

styled components emotion

 

emotion 설치

yarn add @emotion/react @emotion/styled

참고: Emotion 공식 Doc

 

 

SWC 컴파일러 설정

Next 12버전 부터는 Rust 컴파일러 기반의 웹 전용 오픈형 플랫폼 SWC를 사용하게 되면서, 기존 Next(v12 이전)Emotion을 사용하기 위해 필요하던 @emotion/babel-plugin 바벨 플러그인을 대신하여 SWC 컴파일러를 사용할 수 있다. (관련 Next Doc)

// 기존 바벨 사용시 .babelrc 
{
  "presets": ["next/babel", "@emotion/babel-preset-css-prop"],
  "plugins": []
}

이를 위해 next.config.js 에 다음 설정을 추가하자

// next.config.js

module.exports = {
  compiler: {
    emotion: boolean | {
      // default is true. It will be disabled when build type is production.
      sourceMap?: boolean,
      // default is 'dev-only'.
      autoLabel?: 'never' | 'dev-only' | 'always',
      // default is '[local]'.
      // Allowed values: `[local]` `[filename]` and `[dirname]`
      // This option only works when autoLabel is set to 'dev-only' or 'always'.
      // It allows you to define the format of the resulting label.
      // The format is defined via string where variable parts are enclosed in square brackets [].
      // For example labelFormat: "my-classname--[local]", where [local] will be replaced with the name of the variable the result is assigned to.
      labelFormat?: string,
    },
  },
}

// emotion 관련 옵션들을 기본값으로 설정하고 싶다면 
module.exports = {
  compiler: {
    emotion: true,
  },
}

 

 

사용 예제

const Home: NextPage = () => {
  return (
    <StyledWrap>
      <h2>블로그 Home</h2>
      <div>
        Blog
      </div>
    </StyledWrap>
  );
};

export default Home;

const StyledWrap = styled.div`
  background-color: hotpink;
  div {
    font-size: 24px;
  }
`;

 

반응형