Vue3에 SCSS 설치하기

설치 방법

명령어를 입력해서 node-sass랑 sass-loader를 설치해준다

npm install --save-dev node-sass sass-loader

사용 방법

style 의 lang(언어)를 scss로 설정해준다.

<template>
  <div class="wrap">
    <p><span>Hello</span> World</h1>
  </div>
</template>

<style lang="scss">
.wrap {
  p {
    color: blue;
    
    span {
    	color: red;
    }
  }
}
</style>

 

전역 범위에서 사용

vue.congfig.js에 서 옵션을 설정해준다.

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: '
          @import "@/assets/scss/common.css";
          @import "@/assets/scss/layout.css";
        '
      }
    }
  }
}