Vite 에서 SCSS 사용하기

설치는 매우 간단하다.

npm install -D sass

바로 사용하면 된다.

<template>
  
  <div class="test-10">Hello!</div>
  <div class="test-20">Hello!</div>
  <div class="test-30">Hello!</div>
  <div class="test-40">Hello!</div>

</template>

<style lang="scss" scoped>

  $len  : 100;

  @for $i from 1 through $len {

      .test-#{$i} {

          font-size: $i + px;

      }

  }

</style>

당연히 파일로 분리하고, import 할수있다.

/* test.scss */

$len  : 100;

    @for $i from 1 through $len {

        .test-#{$i} {

            color     : yellow;
            font-size : $i + px;

        }

}

<!-- App.vue -->

<template>
  
  <div class="test-10">Hello!</div>
  <div class="test-20">Hello!</div>
  <div class="test-30">Hello!</div>
  <div class="test-40">Hello!</div>

</template>

<style lang="scss" scoped>

  @import './scss/test.scss'

</style>