사실 6년차긴 해도 바닥부터 구축해 보는건 처음이기 때문에...
오늘의 삽질을 기록해보기.
오늘 삽질 전말
- 프로젝트에 사용할 공통 컬러 지정하기
- 해당 컬러를 function을 통해서 가져오게 하고 싶었다 (이전 프로젝트에서 한 내용을 답습)
- 오잉 근데 왜 style이 적용이 안될까?
해결과정
1. _style.scss 파일 생성
/src폴더 하위에 /styles 폴더를 넣은 후 공통 색상을 사용할 _palettes.scss 파일을 생성 후 색상값과 해당 색상을 불러올 function을 생성해 줬다.
앞으로 font나 반응형을 위한 breakpoint 등 스타일 관련된 파일들을 관리하기 위해 _style.scss 파일을 생성후 _palettes.scss을 import 해줬다.
scss 언더바의 의미
https://poburi.tistory.com/entry/SCSS-%EB%B0%91%EC%A4%84%EC%9D%98-%EC%9D%98%EB%AF%B8
/*_palettes.scss*/
$palettes: (
basic: (
000:(
hex: #78D8B6,
opacity: 1,
),
001: (
hex: #214D33,
opacity: 1,
),
002: (
hex: #222E50,
opacity: 1,
),
003: (
hex: #EDF2F7,
opacity: 1
)
)
);/*_style.scss*/
@import './palettes';2. Next.js에 sass 적용해주기
https://nextjs.org/docs/app/building-your-application/styling/sass
위 내용을 보면 sass의 변수를 사용하게 하려면 sass에 대한 사용자 정의를 해줘야 하는데, next.config.js 에 하라고 되어있다.
근데 이번에 내가 생성한 프로젝트는 next.config.mjs 로 되어있었다.
.mjs ? 확장자 자체는 처음 보는 것 같은데?
https://stackoverflow.com/questions/57492546/what-is-the-difference-between-js-and-mjs-files
- mjs는 EcmaScript 모듈의 확장입니다.
- mjs 파일은 Node.js 애플리케이션과 함께 사용하기 위한 ES 모듈(ECMAScript 모듈)이 포함된 소스 코드 파일입니다.
- mjs 파일은 JavaScript로 작성되었으며 Node.js 컨텍스트 외부에서 .JS 확장자를 사용할 수도 있습니다.
- ES 모듈을 사용하면 웹 및 애플리케이션 개발자가 코드를 재사용 가능한 더 작은 구성 요소로 구성할 수 있습니다.
뭐 그렇다고 한다.
근데 문제는 .mjs 파일에서는 next.config에서 path모듈을 저런식으로 사용할 수 없다는 것인데, (import를 사용해야 한다고.)
path모듈 import 경로 찾긴 귀찮고...
.mjs를 .js로 변경후 (next.config.mjs -> next.config.js) 해주니까 에러없이 잘 된다.
3. 공통 style 적용하기
next.config.js에 경로 설정해준 뒤,
공통 style을 적용하고자 하는 scss파일에 @import를 해주니까
function을 사용한 공통 컬러 적용이 아주 잘된다!
