node-sass（Rubyなし）を使用してsass / scssをcssにコンパイルまたは変換する方法は？

Rubyベースのトランスパイラーほど簡単ではなかったので、libsassのセットアップに苦労していました。誰かが方法を説明できますか：

1. libsassをインストールしますか？
2. コマンドラインから使用しますか？
3. gulpやgruntなどのタスクランナーで使用しますか？

私はパッケージマネージャーの経験がほとんどなく、タスクランナーの経験もほとんどありません。

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ファイルへの変更の監視を追加します。

「圧縮」などのその他の便利なオプションをここに@。コマンドラインは迅速な解決に適していますが、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 ファイルをコンパイルします。

gulpでの使用方法

• $ 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 sass上記のタスクを実行して、sassフォルダー内の.scssファイルをコンパイルし、フォルダー内に.cssファイルを生成しcssます。

作業を楽にするために、時計を追加して、手動でコンパイルする必要がないようにします。このコードをあなたのgulpfile.js：に追加してください

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

これですべてが設定されました。監視タスクを実行するだけです。

$ gulp sass:watch

Node.jsでの使用方法

node-sassの名前が示すように、トランスパイル用に独自のnode.jsスクリプトを作成できます。興味がある場合は、node-sassプロジェクトページを確認してください。

libsassはどうですか？

Libsassは、sassCなどの実装者またはこの場合はnode-sassによって構築される必要があるライブラリです。Node-sassには、デフォルトで使用するlibsassのビルドバージョンが含まれています。ビルドファイルがマシンで機能しない場合は、マシンのlibsassをビルドしようとします。このプロセスにはPython2.7.xが必要です（3.xは現在のところ機能しません）。加えて：

LibSassにはGCC4.6 +またはClang / LLVMが必要です。OSが古い場合、このバージョンはコンパイルされない可能性があります。Windowsでは、GCC4.6以降またはVS2013 Update4以降を搭載したMinGWが必要です。Windows上でClang / LLVMを使用してLibSassをビルドすることも可能です。

これらのツールのインストールは、OSによって異なる場合があります。

Windowsでは、node-sassは現在デフォルトでVS2015をサポートしています。ボックスにVS2013しかない場合、コマンドの実行中にエラーが発生した場合は、-msvs_version = 2013を追加してVSのバージョンを定義できます。これは、node-sassnpmページに記載されています。

したがって、VS2013を搭載したWindowsで機能する安全なコマンドラインは次のとおりです。npminstall--msvs_version = 2013 gulp node-sass gulp-sass

ノードv6.11.2およびnpmv3.10.10を使用するWindows10では、任意のフォルダーで直接実行するには、次のようにします。

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

私はnode-sassGithubの指示に従っただけです：

1. Powershellで管理者として実行してnode-gypの前提条件を追加します（しばらく時間がかかります）。

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

2. では、通常のコマンドラインシェル（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現在存在することを確認できます。

3. ローカルアカウント（システムではない） 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