[SCSS] 🕹️ React, Vue에서 SCSS 사용하는 방법.

목차

React, Vue에서의 SCSS 사용법

SCSS는 CSS 전처리기(Preprocesser)라고도 합니다. CSS를 좀 더 프로그래밍 언어스럽게 작성 가능하여, CSS에서 변수, 연산자, 함수, extend, import 등을 사용할 수 있다. 단, 브라우저는 SCSS 문법을 모르기 때문에 SCSS로 작성한 파일을 다시 CSS로 컴파일해야 한다.

---

Sass 라이브러리 설치

우선 Sass 라이브러리를 설치한다.

Shell

// Sass 라이브러리 설치하기.
$ npm install sass --save
# or
$ yarn add sass

---

React에서의 SCSS 사용법

Scss 문서 생성하기

이후 App.scss 문서를 생성하면 App.js에 SCSS 스타일링이 적용된 것을 확인할 수 있다.

SCSS

.App {
   background: yellow;
   color: black;
   padding: 1rem;
   
   .header01 {
     background: white;
     color: black;
     font-size: 3rem;
     text-align: center;
     padding: 1rem;
   }
}

---

React 문서 생성.

SASS 라이브러리 설치가 완료되었다면 App.js 문서에서 SCSS 파일을 import 한다.

JavaScript

import React from 'react';
import './App.scss';

const App = () => {
  return (
    <div className="App">
      <h1 className="Title">Scss Component</h1> 
    </div>
  );
};

export default App;

만약 module.scss 방식으로 사용하고 싶다면 App.scss 문서를 App.module.scss로 이름을 변경한 다음. App.js를 다음과 같이 작성하면 module 방식으로 사용이 가능하다.

JavaScript

import React from 'react';
import styles from './App.module.scss';

const App = () => {
  return (
    <div className={styles.App}>
      <h1 className={styles.Title}>Scss Component</h1> 
    </div>
  );
};

export default App;

---

---

Vue에서의 SCSS 사용법

Vue 문서에서 SCSS 사용하기

Vue.js 문서에서 SCSS를 사용하려면 밑의 코드와 같이 사용하면 된다.

Vue

<style lang="scss">
$backgroundColor: red;

.className: {
    background: $backgroundColor;
}
</style>

---

전역 범위에서의 사용

SCSS를 일반적으로 사용 할 때 variables 또는 mixin, 함수를 별도의 SCSS 파일로 분리하여 사용하므로 모든 파일에서 @import를 반복적으로 실행하는 불편함이 있다. 

SCSS

<style lang="scss">
    @import "@/style/variables";
    @import "@/style/mixin";
    @import "@/style/functions";
</style>

이 문제를 해결하려면 밑의 코드와 같이 사용하면 전역 범위로써 SCSS를 사용할 수 있다. 이런 반복적인 작업을 피하기 위해서는 위의 파일들을 전역 범위에서 사용할 수 있도록 바꿔줘야 한다.

 

수정하기 전에 vue-cli의 2.x에서는 webpack.config.js 파일이 루트 디렉토리에 있었으나, 3.x에서는 vue.config.js 파일을 생성하여 설정해야 한다.

JavaScript

// vue.config.js

module.exports = {
  // options
}

loaderOptions 라는 vue-loader 의 내부 구성을 변경하는데 사용할 수 있는 CSS 옵션이 있다.

Vue

// vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/styles/_variables.scss";
          @import "@/styles/_mixins.scss";
        `
      }
    }
  }
}

위의 설정을 통해서 sass-loader에 추가된 모든 코드는 전역 범위에서 사용할 수 있다.

SCSS

// styles/_variables.scss
$bgColor: red;

Vue

// *.vue

<script lang="scss">
.className {
  background: $bgColor;
}
<script>

---

vue-cli 2.x 라면

vue-cli 2.x 버전이면 Webpack 구성 파일의 vue-loader 옵션을 수정해야 한다.

Vue

// webpack.config.js
{
  test: \/.scss&/,
  use: [
    "vue-styles-loader",
    "css-loader",
    {
      loader: "scss-loader",
      options: {
        data: `
          @import "@/styles/_variables.scss";
          @import "@/styles/_mixins.scss";
        `
      }
    }
  ]
}

---

참고 문헌

• 1Vue.js에서 Sass / Scss 사용하기
• 2[React] 리액트(React)에서 SCSS 사용하는 방법 & 설정 방법
• 3Vue. vue-cli에서 SCSS 적용과 Global SCSS 적용