소개

Sass를 사용할 수 있도록 환경을 구축할 수 있었으므로, 메모로서 이쪽에 기록해 둔다.
덧붙여서 node-sass로 컴파일하고 있습니다. 작업 러너는 gulp입니다!

버전

gulp.ver4

대상

터미널에 저항하는 돌출 디자이너와 Sass에 대해 아무것도 모르는 분

목차

1,Sass 환경 구축에 있어서 중요한 용어·지식의 설명
2, Sass 환경 구축 절차

1,Sass 환경 구축에 있어서 중요한 용어·지식의 설명

node-sass

LibSass를 Node.js에서 실행할 수 있는 라이브러리

Node.js

자바스크립트로 만들어진 서버측 환경(현재 현대 프런트 엔드 개발에 필수적).
설치와 동시에 패키지 관리자(npm)를 사용할 수 있게 된다.

npm

npm의 정식 명칭은 Node Package Manager. Node.js 패키지 (Package)를 관리하는 (Manager) 도구.

작업 러너

다양한 처리를 자동화해 주는 툴. 예를 들어 컴파일과 같은 처리.
이번은 gulp에서 개발. 그 밖에는 Webpack, Grunt 등이 있다. 내가 gulp를 사용한 이유는 참고서에 쓰여 있기 때문입니다 웃음. 하지만 참고서에 따르면 gulpfile.js가 쓰기 쉬운 것 같습니다.

2, Sass 환경 구축 절차

⑴ Node.js를 설치한다.

여기 왼쪽 버튼에서 다운로드합니다.
↓이 명령을 입력하여 성공적으로 설치되었는지 확인하십시오.

node -v

이렇게 표시되면 설치 완료.

v6.数字.数字

"node: command not found"가 표시되면 PATH가 올바르게 설정되어 있는지 확인해 보십시오.

⑵ gulp-cli를 설치한다.

npm install --global gulp-cli

이것으로 「머신(mac)에 대해 gulp-cli를 인스톨 시킨다」라고 하는 의미입니다. mac에 인스톨을 하고 있으므로, 어느 디렉토리하에서도 gulp 커멘드를 사용할 수 있게 되었습니다.

gulp이 설치되어 있는지 확인하십시오.

gulp -v

버전이 표시되면 설치 완료입니다.
gulp : command not found가 표시되면 PATH가 올바르게 설정되어 있는지 확인하십시오.

⑶ Sass를 사용하려는 디렉토리 아래에 package.json 만들기

npm init -y

↑여기의 커멘드로 package.json의 작성한다.

⑷ 같은 디렉토리에 gulp 패키지와 gulp-sass 패키지 설치

npm install --save-dev gulp 
npm install --save-dev gulp-sass

↑여기의 커멘드로 gulp 패키지와 gulp-sass 패키지의 인스톨 한다.

package.json

"devDependencies": {
       "gulp": "^4.0.2",
       "gulp-sass": "^4.0.2"
         }

↑ 그러면 package.json에 이렇게 추기되어야합니다.

⑸　gulpfile.js의 작성

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function() {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest('./css'));
});

gulp.task('sass:watch', function() {
  gulp.watch('./sass/**/*.scss', gulp.task('sass'));
});

⑹ 설정한 환경을 일괄 설치

npm install

이 명령은 "node_modules"를 디렉토리에 추가합니다.
여기서 설치한 패키지는 package.json에 설명되어 있습니다. (이번이라면 gulp, gulp-sass 패키지 등)

결론

이제 Sass를 CSS로 컴파일 할 수 있습니다.
뭔가 잘못된 점이 있으면, 지적 잘 부탁드립니다.
다음에 태스크 러너를 사용할 필요성에 대해 생각해 보겠습니다.