46. Using SASS in Components

• 링크

npm create vue@latest

---

• 프로젝트 링크

---

SASS를 사용하는 방법

1. 컴포넌트에서 작성된 CSS 코드는 기본적으로 일반 CSS로 처리됩니다.
2. 이 프로젝트에는 기본적으로 SASS가 설치되어 있지 않지만, 필요한 경우 쉽게 추가할 수 있습니다.
3. 서버가 실행 중이라면 끄고, 커맨드 라인에서 npm install sass --save-dev 명령어를 실행하여 SASS를 설치합니다.
4. Greeting 컴포넌트를 에디터에서 열고, 스타일 블록에 lang="scss" 속성을 추가합니다. 이로써 프로젝트에서 SASS를 사용하게 됩니다.
5. Vue CLI의 프리셋은 대부분의 CSS 전처리기를 지원하며, lang 속성을 추가함으로써 컴파일러가 지정된 언어의 전처리기를 사용하도록 지시합니다.
6. SASS를 사용하여 호버(pseudo-selector)와 darken 함수를 적용해봅니다.
7. 서버를 다시 켜고 페이지를 새로고침하여 SASS 코드가 CSS로 컴파일되는 것을 확인합니다.
8. Vue에서 CSS를 사용하는 방법에 대한 보다 자세한 내용은 문서를 참조하시기 바랍니다. 좀 더 고급 주제들은 필요할 때 다룰 예정입니다.

App.vue

<script lang="ts">
  import Greeting from "@/components/Greeting.vue";
  export default {
    name: 'App',
    components: {
      Greeting,
    }
  }
</script>

<template>
  <p>App.vue</p>
  <Greeting/>
</template>

Greeting.vue

<script lang="ts">
  export default {
    name: 'Greeting',
    data() {
      return {
        msg: 'Hello World!'
      }
    }
  }
</script>

<template>
  <p>{{ msg }}</p>
</template>

<style scoped lang="scss">
  p:hover {
    color: darken(#cc4444, 15%);
  }
</style>

main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from '@/App.vue';
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')