리엑트 postcss에서 sass 문법 설정 방법

react에서 sass 설정을 살펴 보던 중 postcss가 기본설정이 되어 있어
굳이 sass loader를 사용하기 보다 postcss에서 sass문법을 지원하는
플러그인 설치를 하는 방향이 더 좋을거 같습니다.

postcss에서 sass문법을 지원하는 플러그인은 postcss에서 검색을 하면 찾아 볼 수 있습니다.
우선 자주 쓰는 변수 선언, 중첩 css 작성할 수 있게 해주는 precss, postcss-nested을 설치해 보도록 하겠습니다.

config 파일 생성

1
yarn eject

precss, postcss-nested 설치

1
yarn add -D precss postcss-nested

webpack 설정

config/webpack.config.dev
config/webpack.config.prod
파일에서 아래 부분을 찾은다음 추가해 주면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
{
  test: /\.css$/,
  use: [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
      },
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebookincubator/create-react-app/issues/2677
        ident: 'postcss',
        plugins: () => [
          require('precss'), // 추가
          require('postcss-nested'), //추가
          require('postcss-flexbugs-fixes'),
          autoprefixer({
            browsers: [
              '>1%',
              'last 4 versions',
              'Firefox ESR',
              'not ie < 9', // React doesn't support IE8 anyway
            ],
            flexbox: 'no-2009',
          }),
        ],
      },
    },
  ],
},

App.js , App.css 수정 후 확인

아래와 같이 파일을 수정한 후 잘 동작하는지 확인하면 됩니다.

src/App.css

/src/App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <div className={`test`}>test</div>
      </div>
    );
  }
}

export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$blue: #056ef0;

.App {
  text-align: center;
  .test {
    color: $blue;
  }
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-title {
  font-size: 1.5em;
}

.App-intro {
  font-size: large;
}

@keyframes App-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}