Ruby 기반 트랜스 파일러만큼 간단하지 않았기 때문에 libsass를 설정하는 데 어려움을 겪고있었습니다. 누군가가 방법을 설명 할 수 있습니까?
- libsass를 설치 하시겠습니까?
- 명령 줄에서 사용 하시겠습니까?
- 꿀꺽 꿀꺽 꿀꺽 꿀꺽 같은 작업 주자와 함께 사용합니까?
나는 패키지 관리자에 대한 경험이 거의 없으며 태스크 러너에 대해서는 더 적습니다.
답변:
node.js를 기반으로하기 때문에 libsass에 대한 node-sass 구현자를 선택했습니다.
$ npm install -g node-sassnode-sass를 전역 적으로 설치합니다 -g.하단의 libsass를 읽지 않으면 필요한 모든 것을 설치할 수 있습니다.
일반 형식 :
$ node-sass [options] <input.scss> [output.css]
$ cat <input.scss> | node-sass > output.css
예 :
$ node-sass my-styles.scss my-styles.css 단일 파일을 수동으로 컴파일합니다.$ node-sass my-sass-folder/ -o my-css-folder/ 폴더의 모든 파일을 수동으로 컴파일합니다.$ node-sass -w sass/ -o css/소스 파일이 수정 될 때마다 폴더의 모든 파일을 자동으로 컴파일합니다. -w파일 변경에 대한 감시를 추가합니다.'compression' @ here 와 같은 더 유용한 옵션 . 명령 줄은 빠른 솔루션에 적합하지만 Grunt.js 또는 Gulp.js와 같은 작업 실행기를 사용하여 빌드 프로세스를 자동화 할 수 있습니다.
위의 예를 npm 스크립트에 추가 할 수도 있습니다. 제대로으로 NPM 스크립트를 사용하여 꿀꺽 대안 읽을 포괄적 기사 @ css-tricks.com 특히 읽어 작업을 그룹화를 .
package.json프로젝트 디렉토리에 파일 이 없으면 실행 $ npm init하면 파일 이 생성됩니다. 함께 사용 -y하여 질문을 건너 뜁니다."sass": "node-sass -w sass/ -o css/"로 scripts에서 package.json파일. 다음과 같이 보일 것입니다."scripts": {
"test" : "bla bla bla",
"sass": "node-sass -w sass/ -o css/"
}
$ npm run sass 파일을 컴파일합니다.$ npm install -g gulp Gulp를 전 세계적으로 설치합니다.package.json프로젝트 디렉토리에 파일 이 없으면 실행 $ npm init하면 파일 이 생성됩니다. 함께 사용 -y하여 질문을 건너 뜁니다.$ npm install --save-dev gulpGulp를 로컬로 설치합니다. --save-dev추가 gulp로 devDependencies에서 package.json.$ npm install gulp-sass --save-dev gulp-sass를 로컬로 설치합니다.gulpfile.js다음 내용으로 프로젝트 루트 폴더에 파일 을 생성하여 프로젝트에 대한 gulp를 설정하십시오 .'use strict';
var gulp = require('gulp');
트랜스 파일의 기본 예
gulpfile.js에 다음 코드를 추가하십시오.
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
$ gulp sasssass폴더 의 .scss 파일을 컴파일하고 폴더에 .css 파일을 생성 하는 위의 작업을 실행 css합니다.
삶을 더 쉽게 만들기 위해 시계를 추가하여 수동으로 컴파일 할 필요가 없습니다. 이 코드를에 추가하십시오 gulpfile.js.
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
이제 모든 것이 설정되었습니다! watch 작업을 실행하면됩니다.
$ gulp sass:watch
node-sass의 이름에서 알 수 있듯이 트랜스 파일을위한 자체 node.js 스크립트를 작성할 수 있습니다. 궁금하다면 node-sass 프로젝트 페이지를 확인하세요.
Libsass는 sassC 또는 우리의 경우 node-sass와 같은 구현자가 빌드해야하는 라이브러리입니다. Node-sass는 기본적으로 사용하는 libsass의 빌드 된 버전을 포함합니다. 빌드 파일이 컴퓨터에서 작동하지 않으면 컴퓨터 용 libsass 빌드를 시도합니다. 이 프로세스에는 Python 2.7.x가 필요합니다 (3.x는 현재 작동하지 않음). 게다가:
LibSass에는 GCC 4.6+ 또는 Clang / LLVM이 필요합니다. OS가 오래된 경우이 버전이 컴파일되지 않을 수 있습니다. Windows에서는 GCC 4.6 이상 또는 VS 2013 업데이트 4 이상이 포함 된 MinGW가 필요합니다. Windows에서 Clang / LLVM으로 LibSass를 빌드 할 수도 있습니다.
이러한 도구의 설치는 OS에 따라 다를 수 있습니다.
Windows에서 node-sass는 현재 기본적으로 VS2015를 지원합니다. 상자에 VS2013 만 있고 명령을 실행하는 동안 오류가 발생하는 경우 --msvs_version = 2013을 추가하여 VS 버전을 정의 할 수 있습니다. 이것은 node-sass npm 페이지에 기록되어 있습니다.
따라서 VS2013이 설치된 Windows에서 작동하는 안전한 명령 줄은 다음과 같습니다. npm install --msvs_version = 2013 gulp node-sass gulp-sass
노드 v6.11.2 및 npm v3.10.10을 사용하는 Windows 10 에서 모든 폴더에서 직접 실행하려면 :
> node-sass [options] <input.scss> [output.css]
node-sass Github 의 지침 만 따랐습니다 .
Powershell에서 관리자로 실행하여 node-gyp 필수 구성 요소 를 추가 합니다 (시간이 걸립니다).
> npm install --global --production windows-build-tools
A의 일반 명령 행 쉘 ( Win+ R+ cmd를 + Enter) 실행 :
> npm install -g node-gyp
> npm install -g node-sass
은 -g아래에이 패키지를 배치합니다 %userprofile%\AppData\Roaming\npm\node_modules. npm\node_modules\node-sass\bin\node-sass지금 존재 하는지 확인할 수 있습니다 .
로컬 계정 (시스템 아님) PATH 환경 변수에 다음이 포함되어 있는지 확인하십시오 .
%userprofile%\AppData\Roaming\npm
이 경로가 없으면 npm 및 노드 가 계속 실행될 수 있지만 모듈 bin 파일은 실행되지 않습니다!
닫기 이전 쉘 과 새와 실행 중 다시 > node-gyp또는 > node-sass.
노트 :
windows-build-tools 필요하지 않을 수도있다 (더 컴파일이 완료되지 않은 경우? 나는 누군가가 이러한 도구를 설치하지 않고 그것을 만든 경우 읽고 싶은)하지만 관리자에 추가 계정 않았다 GYP_MSVS_VERSION으로 환경 변수를 2015값으로.> uglifyjs main.js main.min.js및> mocha
node-sass에gulp-sass의 의존성 필요가 로컬로 설치하지 않을 수 있도록.