본문 바로가기
반응형

SCSS
2

[emotion] 이모션을 styled-component처럼 사용하기(@emotion/styled) emotion 설치 npm i @emotion/react @emotion/styled styles 파일 만들기 User.tsx페이지에 사용할 User.styles.ts파일을 만들었다. import는 꼭 @emotion/styled로 해주어야한다. @emotion/react로하면 styled문법이 적용안된다. 아래는 테스트용 컴포넌트이다. import styled from '@emotion/styled'; export const TopBox = styled.div` margin-right: 25px; `; 컴포넌트 import하여 사용 TopBox라는 컴포넌트를 사용했다. import React from 'react' import { TopBox } from './Users.styles'; const Us.. 2023. 9. 5.
[React] React Component Styling React Component Styling 01. Style Loaders style-loader, css-loader가 .css나 .scss를 컴파일링해서 빌드함 eject 설정 웹팩설정을 꺼내서 설정을 하기위해 npm run eject 한번해야한다. 커밋하기 eject는 아직 git에 커밋되지 않은 변화가 있다면 진행되지 않아서 먼저 커밋해줘야한다. git add . git commit -m "commit before eject config/webpack.config.js 설정 config/webpack.config.js 열어본다. 임포트 절대경로 설정방법 기존에 상대경로 임포트를 절대경로로 사용하기위해 설정할 수 있는 방법이다. @import '../../../styles/utils'.. 2023. 8. 25.
반응형

최근댓글

최근글

© Copyright 2023 jngmnj

티스토리툴바