[Vue3 + Scss] 어드민에서 설정한 타입별로 전체 디자인 포인트컬러값 다르게 하기(--root)

이슈

어드민에서 타입을 정하면 타입에 따라 프론트의 전체적인 포인트 컬러를 변경해달라는 요청이 있었다.
원래는 scss는 app.scss 하나를 vite.config.ts에서 부르는걸로 되어있었는데 구조 변경이 필요했다.

 

해결

최종 scss파일 구조

scss는 크게 2가지로 볼 수 있는데,
app.scss는 divide폴더안의 파일들을 import한 파일이고 main.ts에서 부르고,
global.scss는 common폴더안의 파일들을 import한 파일이고 vite.config.ts에서 부른다.

app.scss와는 다르게 global.scss는 vite.config.ts에서 부르므로 서버사이드가 돌면서 실행되는데, 
이때 컬러변수는 동일하게 설정하고 :root를 위에 선언하여 특정 클래스가 있을때만 바뀌도록 하였다.
그리고 --root에서 설정된 컬러값을 컬러변수에 매칭시켜 각 페이지의 scss에서는 동일하게 사용하도록 하였다.

특정 클래스는 서버사이드렌더링 시 html 을 생성하는 부분에서 조건에 따라 분기처리하는 것으로 작업하였다.

 

---

:root {
  --pcolor: #ff5907; //orange
  --black: #111;

  //secondary
  --mint: #00bdb6;
  --lightmint: #e7fcfc;
  --lightorange: #fff1eb;


  //커스텀 타입 1 (현재는 임시)
  .customType1 {
    --pcolor: pink;
    --black: #666;

    //secondary
    --mint: #33a3ff;
    --lightmint: #ff2d21;
    --lightorange: #00c751;
  }
}

//primary
$pcolor: var(--pcolor);
$black: var(--black);

//secondary
$mint: var(--mint);
$lightmint: var(--lightmint);
$lightorange: var(--lightorange);