[LESS] less-watch-compiler 사용법

less 설치

// yarn
yarn global add less-watch-compiler

// npm
npm install -g less-watch-compiler

 

less-watch-compiler 설치

// yarn
yarn global add less

// npm
npm install -g less

 

 

less-watch-compiler.config.json 설정

{
    "watchFolder": "src", // 보고있을 폴더, less를 보고있는다.
    "outputFolder": "dist", // 결과물을 낼 폴더, css로 반환한다.
    "mainFile": "main.less" // watchFolder에서 어떤 파일을 보고 있을것인지.
}

이게 제일 기본 config 설정이다.

 

mainFile을 지정하지 않아도 되는데, 지정하지 않으면 watchFolder 안의 모든 .less 파일을 .css로 컴퍼일해준다.

 

나는 보통 메인 파일을 만들고, 그 안에 다른 파일들을 다 포함시켜서 사용한다.

 

 

less-watch-compiler 사용

less-watch-compiler.config.json 파일이 있는 곳으로 이동하여

less-watch-compiler

명령어를 사용한다.

 

config 파일을 알아서 찾아 실행한다.

 

이를 모르고 뒤에 config 파일을 넣어줘야 하는 줄 알고 몇분을 헤맸다.