[React] 리액트(React)에서 SCSS 사용하는 방법 & 설정 방법

드디어 리액트에서 scss를 사용하기 편리해졌다.

v2가 릴리즈되면서 매우 편해졌다.

지난번까지는 

yarn eject를 해서, css 부분을 복사해 하단에 붙여넣고 sass-loader를 추가하고 

나름 복잡한 작업을 해줘야 SCSS를 인식했다.

하지만, 업데이트되면서,

node-sass만 설치해준뒤,

CSS파일을 불러오듯이,  --> import './App.css';

SCSS파일을 불러와서 사용하면 된다. --> import './App.scss';

와우!

편해졌다.

---

만약,  node-sass를 설치하지 않고 scss를 사용하려고 한다면 다음과 같은 에러가 발생한다.

쉽게 해석하면,

sass 파일을 import하기 위해서는 node-sass를 설치하라!

라는 의미이다.

yarn add node-sass

또는

npm install node-sass 를 입력한다.

 

---

(예제)

TestComponent.js를 하나 만든다. 그리고, scss 파일을 import한다.

import React from 'react';

import './TestComponent.scss';

const TestComponent = () => {

return (

<div className="MyComponent">

<h1 className="header01">Test Component</h1>

</div>

);

};

export default TestComponent;

TestComponent.scss를 만든다.

.MyComponent {

background: yellow;

color: black;

padding: 1rem;

.header01 {

background: white;

color: black;

font-size: 3rem;

text-align: center;

padding: 1rem;

}

}

 

App.js에서 TestComponent.js를 import한 뒤, 삽입한다.

import React, { Component } from 'react';

import './App.css';

import TestComponent from './TestComponent';

class App extends Component {

render() {

return (

<div className="App">

<TestComponent />

</div>

);

}

}

export default App;

이렇게한뒤, 

css를 사용하는 것처럼 적용된다.