SASS를 CSS로 컴파일하고 변경 사항을 확인하는 방법은 무엇입니까?

SASS는 CSS를 확장합니다. 즉, 케이크 위에 올려진 체리처럼 CSS의 모든 기능과 SASS의 기능을 모두 가질 수 있습니다!

브라우저는 React에서 (유효한 javascript로 컴파일됨) 이해하지 못하는 것과 마찬가지로SASS 이해하지 못합니다JSX. 그렇기 때문에 SASS를 브라우저에서 실행하려면 SASS를 일반 CSS로 컴파일해야 합니다.

시스템에 SASS already installed이 있다고 가정하고 SASS 파일을 CSS 파일로 변환하는 방법을 살펴보겠습니다.

SASS 파일 컴파일

다음과 같은 폴더 구조가 있다고 가정해 보겠습니다.

public/
-> styles/

src/
-> styles/
    -> style.scss

결국 SASS 파일인 .scss 확장자를 가진 파일을 public/styles 디렉토리의 CSS 파일로 컴파일해야 합니다.

폴더의 루트에 있는 터미널에서 다음 명령을 실행하면 됩니다.

sass src/styles:public/styles

콜론 앞의 디렉토리:는 입력 디렉토리이고 콜론 뒤의 디렉토리는 출력 디렉토리입니다.

루트 디렉토리에 SASS 파일이 있고 동일한 루트 디렉토리에 CSS 파일을 출력하려는 ​​경우 다음을 사용할 수 있습니다.

sass style.scss style.css

Here, 'root directory' means the directory you are currently pointing to in your terminal.

그러나 CSS 파일을 SASS 파일과 동일한 디렉토리에 배치하려면 어떻게 해야 합니까? 위의 명령만 실행하면 됩니다.

sass src/styles:src/styles

이제 육즙이 많은 부분으로 이동하겠습니다. SCSS 파일에 대한 변경 사항을 적용하고watch 자동으로 CSS로 컴파일하는 방법을 살펴보겠습니다.

SASS의 변경 사항 확인

명령에 --watch 플래그를 추가하면 src/styles 디렉토리의 Sass 파일에 대한 변경 사항을 볼 수 있습니다.

sass --watch src/styles:public/styles

그게 다야. 이제 SASS 파일에서 변경한 사항은 SASS 파일을 저장하는 즉시 자동으로 CSS로 컴파일됩니다!

또한 VSCode를 사용하는 경우 an extension을 사용하여 SASS 파일을 CSS로 컴파일하면 SASS를 처리하기가 매우 편리하지만 그것도 !

종료합니다.

This post was originally published in Syntackle!

| | GitHub