Windows의 NetBeans에서 Sass 자동 빌드 (node-sass)

2249 단어 SassNetBeansnode-sass

TIPS



node-sass 실행 파일의 지정은 NetBeans 설정 (모든 프로젝트 공통)이되어 버리므로 프로젝트 외부에 설치하는 것이 좋습니다.

이전 준비



node 설치까지 끝나고 npm을 사용할 수 있는 전제입니다.
아직의 경우 먼저 여기 → Windows에서 nodist를 사용하여 Node 환경 구축
npm -v
> 4.0.5

필요한 것을 설치


## node-sassをインストールするディレクトリに移動 
cd C:\node-sassインストール先パス

## npmの初期化(すでに終わっているなら必要ないです)
npm init -y

## node-sassをインストール
npm install --save-dev node-sass

현재 디렉토리의 node_modules 이하에 파일이 되어 있는 것을 확인한다
node_modules.bin\node-sass.cmd

NetBeans 설정


  • NetBeans 시작
  • 파일(F) > 프로젝트 속성
  • CSS 전처리기
  • Sass 탭



  • 선택합니다.

    지금 이런 화면 (기본 설정)

  • 오른쪽 상단의 실행 파일 구성 버튼을 누르면 옵션 대화 상자가 열리므로
  • "Sass 경로"에 node-sass.cmd 파일을 지정
  • ...node-sassインストール先...\node_modules\.bin\node-sass.cmd
  • "OK"로 확정



  • 원래 대화 상자 (프로젝트 속성)로 돌아갑니다.
  • 저장시 Sass 파일을 컴파일에 체크합니다
  • 입출력에 프로젝트 루트의 경로를 입력하십시오.
  • 컴파일러 옵션 입력--output-style expanded --source-map-contents --source-map-embed


  • 모두 입력이 끝난 화면


    「OK」버튼 눌러 다이얼로그 닫으면, 자동적으로 컴파일러가 움직여 css가 출력된다! 하즈!

    node-sass의 컴파일러 옵션은 공식 (GitHub)을 타고 있습니다!
    node-sass

    좋은 웹페이지 즐겨찾기