Rocky Linux9 SASS 설치 및 자동컴파일러 만들기

  • 2nd September 2024
  • 2 min read

Sass 는 CSS 확장언어(전처리기) 로 볼 수 있다. CSS 에서 지원하지 않는 중첩이나 함수, 상속 등의 프로그래밍적인 기능을 활용하여, 더 효율적이로 강력한 작성 방법을 지원한다. 이를 통해 더욱 구조적이로 유지보수가 쉬운 스타일 시트를 작성할 수 있도록 도와준다. 

먼저 Sass 를 사용하기 위해 시스템에 컴파일러 설치가 필요하다 이를 위해 npm 이라는 nodejs package manager 가 필요하다. 

Sass 설치 준비

nodejs 설치

dnf install nodejs

Sass 설치

npm 이 설치가 완료되었다면 sass 를 설치한다. 

npm install -g sass

sass 설치는 완료되었다. 

Sass 자동컴파일러 만들기

이미 sass 에서도 --watch 기능을 제공하여 파일이 변경되었을 때 자동으로 컴파일이 시작되도록 할 수 있으나, 프로세스가 종료되거나 할때마다 다시 실행을 해주어야 하는 불편함이 있다. 그래서 시스템에 자동으로 데몬을 띄워두고 sass, scss 파일의 변경이 있을 때 마다 자동으로 컴파일이 진행되도록 할 수 있다. 이를 위해 필요한 것이 몇가지 있는데 하나는 inotify-tools 라고 하는 것이다. 

inotify-tools 는 파일에 어떠한 변화가 생기는지 모니터링을 해주는 툴이다. 이를 이용해 자동컴파일러를 만들어보자. 

inotify-tools 설치

먼저 inotify-tools 를 설치한다. 

dnf install inotify-tools

이제 파일을 모니터링 하는 sh 를 작성한다. 

vi /home/site/src/resource/scss/autoc.sh

#!/bin/bash
# Detect changes in .scss file and automatically compile into .css
cd ${0%/*} 2>/dev/null
scss_path=${0%/*}
scss_log="$scss_path/autoc.log"
pid_file="$0.daemonpid"
if [ ! -f "$pid_file" ] #중복 실행 방지
then
    echo "$$" > "$pid_file"
    inotifywait -q -m -e close_write -r --exclude '.*\.(log|pid|sh|daemonpid)' $scss_path | while read x op f; do
        if [[ "$f" == *".scss" ]] ||  [[ "$f" == *".css" ]]; then
            echo "Change $x$f detected." > $scss_log
            if [ -s "$0.pid" ];then
                echo "$0.pid"  >> $scss_log
                echo "Compile already processing..." >> $scss_log
            else
                echo $$ > "$0.pid"
                if [ $x == "$scss_path/" ]; then
                    echo "Start compile main style files..." >> $scss_log
                    /usr/local/bin/sass "$scss_path/default.scss" "$scss_path/public/css/default.css" -q --no-error-css --no-color --style=compressed &>> $scss_log
                   
                fi
                echo "Compile completed..." >> $scss_log
                rm -f "$0.pid"
            fi
        fi
    done
    rm -f "$pid_file"
fi

위와 같이 sh 파일을 생성후 실행 권한을 부여합니다.

chmod +x autoc.sh

 이제 크론탭에 위 파일을 스케줄 등록합니다. 

crontab -e
* * * * * /home/site/src/resource/scss/autoc.sh 2>&1

 이제 자동컴파일러가 생성되었습니다. 

ps . 서버가 재부팅되거나 하는 경우에는 autoc.sh 파일과 같은 위치에 있는 daemonpid 파일을 삭제하면 자동으로 데몬이 다시 실행됩니다.