node-sass (Ruby 없음)를 사용하여 sass / scss를 css로 컴파일하거나 변환하는 방법은 무엇입니까?

node-sass (Ruby 없음)를 사용하여 sass / scss를 css로 컴파일하거나 변환하는 방법은 무엇입니까?

---

Ruby 기반 트랜스 파일러만큼 간단하지 않았기 때문에 libsass를 설정하는 데 어려움을 겪고있었습니다. 누군가가 방법을 설명 할 수 있습니까?

1. libsass를 설치 하시겠습니까?
2. 명령 줄에서 사용 하시겠습니까?
3. 꿀꺽 꿀꺽 꿀꺽 꿀꺽 같은 작업 주자와 함께 사용합니까?

나는 패키지 관리자에 대한 경험이 거의 없으며 태스크 러너에 대해서는 더 적습니다.

---

node.js를 기반으로하기 때문에 libsass에 대한 node-sass 구현자를 선택했습니다.

node-sass 설치

• (전제 조건) npm이없는 경우 Node.js를 먼저 설치하십시오 .
• $ npm install -g node-sassnode-sass를 전역 적으로 설치합니다 -g.

하단의 libsass를 읽지 않으면 필요한 모든 것을 설치할 수 있습니다.

명령 줄 및 npm 스크립트에서 node-sass를 사용하는 방법

일반 형식 :

$ node-sass [options] <input.scss> [output.css]
$ cat <input.scss> | node-sass > output.css

예 :

1. $ node-sass my-styles.scss my-styles.css 단일 파일을 수동으로 컴파일합니다.
2. $ node-sass my-sass-folder/ -o my-css-folder/ 폴더의 모든 파일을 수동으로 컴파일합니다.
3. $ 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합니다.

To make life easier, let's add a watch so we don't have to compile it manually. Add this code to your gulpfile.js:

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

All is set now! Just run the watch task:

$ gulp sass:watch

How to use with Node.js

As the name of node-sass implies, you can write your own node.js scripts for transpiling. If you are curious, check out node-sass project page.

What about libsass?

Libsass is a library that needs to be built by an implementer such as sassC or in our case node-sass. Node-sass contains a built version of libsass which it uses by default. If the build file doesn't work on your machine, it tries to build libsass for your machine. This process requires Python 2.7.x (3.x doesn't work as of today). In addition:

LibSass requires GCC 4.6+ or Clang/LLVM. If your OS is older, this version may not compile. On Windows, you need MinGW with GCC 4.6+ or VS 2013 Update 4+. It is also possible to build LibSass with Clang/LLVM on Windows.

---

The installation of these tools may vary on different OS.

Under Windows, node-sass currently supports VS2015 by default, if you only have VS2013 in your box and meet any error while running the command, you can define the version of VS by adding: --msvs_version=2013. This is noted on the node-sass npm page.

So, the safe command line that works on Windows with VS2013 is: npm install --msvs_version=2013 gulp node-sass gulp-sass

---

In Windows 10 using node v6.11.2 and npm v3.10.10, in order to execute directly in any folder:

> node-sass [options] <input.scss> [output.css]

I only followed the instructions in node-sass Github:

1. Add node-gyp prerequisites by running as Admin in a Powershell (it takes a while):

   > npm install --global --production windows-build-tools
   

2. In a normal command-line shell (Win+R+cmd+Enter) run:

   > npm install -g node-gyp
   > npm install -g node-sass
   

   The -g places these packages under %userprofile%\AppData\Roaming\npm\node_modules. You may check that npm\node_modules\node-sass\bin\node-sass now exists.

3. Check if your local account (not the System) PATH environment variable contains:

   %userprofile%\AppData\Roaming\npm
   

   If this path is not present, npm and node may still run, but the modules bin files will not!

Close the previous shell and reopen a new one and run either > node-gyp or > node-sass.

Note:

• The windows-build-tools may not be necessary (if no compiling is done? I'd like to read if someone made it without installing these tools), but it did add to the admin account the GYP_MSVS_VERSION environment variable with 2015 as a value.
• I am also able to run directly other modules with bin files, such as > uglifyjs main.js main.min.js and > mocha

참고URL : https://stackoverflow.com/questions/31448114/how-to-compile-or-convert-sass-scss-to-css-with-node-sass-no-ruby