[Vue.js] Vue.js에서 Sass(SCSS) 사용하기

 

 

Sass에 대한 간단한 소개와 문법은 이 글에서 볼 수 있다.

 

[CSS] Sass(SCSS)란

 

 

---

 

 

 

◽ Sass 설치

npm i sass
npm i sass-loader@10

 

 

◽ Sass 사용하기

<style> 태그안에 lang="scss"을 추가한다.

/* vue 템플릿의 <style>에서 사용한다. */
<style lang="scss">
	...CSS 정의
</style>

 

아래와 같이 변수를 선언하고 사용할 수 있다.

<style lang="scss">
  $main_color: rgb(238, 238, 238);
  body {
    background-color: $main_color;
  }
</style>

 

 

body에 background-color가 적용되었다.

 

 

 

 

◽ 변수 분리하기

변수가 많아지는 경우 변수를 따로 모아놓는 파일을 만든다.

 

📄 src/assets/_variabled.scss

/* _variabled.scss */
/* _가 붙은 scss 파일은 변수만을 저장하는 파일로 인식된다. */
$global_width: 1200px;
$border_color: red;
$primary-color: black;​

 

📄 src/views/index.vue

<style lang="scss">
// 이렇게 import하여 사용할 수 있다.
@import "../assets/_variabled.scss";
body {
	background-color: $primary-color;
}
</style>​

 

 

◽ 전역 설정

하지만 모든 vue에서 변수를 쓸 때 마다 매번 변수파일을 @import 할 수는 없는 노릇이다.

그래서 전역으로 해당 변수를 사용할 수 있도록 설정한다. (파일 만든 후 재빌드하는 것.. 잊지말자!)

// vue.config.js
// cli 3부터는 이 파일을 만들어준다.
module.exports = {
  css: {
    loaderOptions: {
      scss: {
		// 이 옵션에 변수를 모아둔 파일을 연결한다.
		additionalData: `
			@import "@/assets/_variabled.scss";
                `,
      },
    },
  },
};

 

변수가 담겨있는 _variabled.scss 파일이 전역으로 설정되었기 때문에 @import를 하지않아도 변수를 바로 사용할 수 있다.

// test.vue
<style lang="scss">
body {
  background-color: $primary-color;
}
</style>

 

 

---

 

 

 

출처 및 참고

Vue.js에서 scss 사용하기

[ Vue Error ] sass-loader 설치 오류

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.