ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • scss
    개발/react 2020. 12. 13. 15:50

    Syntactically Awesome StylesheetS 의 준말로 기존 css보더 더 편하게 스타일링 할 수 있는 언어다. css에 있는 모든 기능을 포함하고 여기에 더해 변수랑 내부에서 제공하는 함수도 사용할 수 있기 때문에 개발자들의 반복적인 작업을 확 줄여준다. 5년 전에 간단히 홈페이지 만들면서 css를 쓰고 불편하다고 느낀후 지금까지 손댄적이 없었는데 지금은 scss 라는 언어로 더 쉽게 스타일링 할 수 있게 된 것 같다. 이번포스트에서는 scss를 react에 적용하는 방법을 간단히 소개한다.

     

    1. scss 로더 추가 

     

    scss는 확장 기능이므로 새로 css로 transformation 해주는 기능이 필요하다. 별도의 로더를 설치하고 스크립트를 실행할 수 있으나 여기선 webpack에 로더를 추가해서 정리하려고 한다. 먼저 아래 명령어로 필요한 라이브러리를 추가한다.

     

    yarn add style-loader css-loader sass-loader node-sass

     

    그리고 webpack.config.js에 css, scss 용 로더를 추가한다.

     

    module.exports = {
        ...
        module: {
            rules: [{
                loader: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
            }, {
                test: /\.s?css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]

     

    2. scss 파일 추가 

     

    scss로 쓸 파일을 추가한다. scss 언어 내에 import 기능이 있어 여러 개의 파일로 의존성이 가능하다. 최상위 파일로 styles.scss 을 만들고 예시로 base 폴더 내에 base.scss 파일을 추가한다.

     

    styles.scss

     

    @import './base/base';

     

    base.scss

     

    간단하게 브라우저 전체에 적용될 수 있는 스타일링을 넣었다.

     

    body {
        background: $dark-blue;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 2.4rem;
    }

     

    3. entry 파일에서 임포트 

     

    entry에 해당하는 파일에서 아까 추가한 scss 파일을 임포트 한후 간단한 코드를 넣어 봤다.

     

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './styles/styles.scss';
    
    ReactDOM.render(<div><h1>This is selfish-developer blog</h1></div>, document.getElementById('app'))

     

    그 결과 아래처럼 스타일링이 된 것을 확인 할 수 있다.

     

    '개발 > react' 카테고리의 다른 글

    react router  (0) 2020.12.17
    redux  (0) 2020.12.16
    scss  (0) 2020.12.13
    webpack  (0) 2020.12.13
    localStorage  (0) 2020.12.11
    Props  (0) 2020.12.11

    TAG

    댓글 0

Designed by Tistory.