[Nuxt3] 런타임 시 public폴더로 scss파일 css로 컴파일하기

/assets/scss 파일 /public/css로 보내기

public폴더의 css, images 파일의 CDN적용을 위한 설정
public/css/
public/images/

조건 :빌드 시점이 아닌 런타임 시에도 public폴더로 css가 컴파일 되면 좋겠음.

npm 설치

sass가 설치되어있지 않으면 설치

npm install --save-dev sass

package.json 수정

/* package.json */
"scripts": {
// assts/scss 폴더 scss파일을 public/css 폴더 css파일로
  "compile-scss": "sass assets/scss:public/css",
// assts/scss 폴더 내 변경 감지 watch하기 public/css 로 보내기
  "compile-scss-watch": "sass --watch assets/scss:public/css"
}

 

NPM 스크립트 실행

npm run compile-scss-watch

하지만 dev 실행 시 같이 실행하고 싶다!
해결을 위해 병렬 NPM스크립트 실행 패키지  'npm-run-all' 설치

' npm-run-all ' npm 설치

npm install --save-dev npm-run-all

package.json 수정

/* package.json */
"scripts": {
  "build": "nuxt build",
  "start": "nuxt start",
  "dev": "npm-run-all -p compile-scss-watch dev:dev",
  "build:dev": "cross-env RUN_TYPE=dev nuxt build --dotenv .env.dev",
  "dev:dev": "cross-env RUN_TYPE=dev nuxt dev --dotenv .env.dev --host 127.0.0.1 --port 3000",
  "compile-scss": "sass assets/scss:public/css",
  "compile-scss-watch": "sass --watch assets/scss:public/css"
},

 

NPM 스크립트 실행

npm run dev

dev 실행 시 public/css 폴더 생성되고 css 컴파일 됨
assets/scss 파일 수정 시 public/css 폴더 css 컴파일 됨

여기서도 '_variable.scss' (언더스코어)로 시작하는 SCSS 파일은 컴파일 하지 않음.

 

마지막 적용

public폴더는 컴포넌트에서 import로 호출되지 않아 link로 호출
전역 css는 nuxt.config에서 호출
이제 환경별 cdnUrl을 주입하면 끝!!

/* main.vue */
<template>
  <div>메인에서만 main.css호출</div>
</template>

<script setup lang="ts">
useHead({
  link: [{ rel: 'stylesheet', href: `${cdnUrl}/css/pages/main/main.css` }]
})
</script>

<style scoped></style>