web-dev-qa-db-ja.com

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

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

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

私はパッケージマネージャーの経験がほとんどなく、タスクランナーの経験も少ないです。

csssassgulp-sassnode-sasslibsass
74
Thoran

Node.jsに基づいているため、libsassのnode-sassインプリメンターを選択しました。

Node-sassのインストール

  • （前提条件）npmがない場合は、最初に Node.js をインストールします。
  • $ npm install -g node-sassはnode-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スクリプトをgulpの代替として適切に使用するには、 この包括的な記事@ css-tricks.com を特に読んでください グループ化タスク 。

  • プロジェクトディレクトリにpackage.jsonファイルが存在しない場合、$ npm initを実行すると作成されます。質問をスキップするには、-yとともに使用します。
  • "sass": "node-sass -w sass/ -o css/"をpackage.jsonファイルのscriptsに追加します。次のようになります。
"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 gulpはGulpをローカルにインストールします。 --save-devは、package.jsonのgulpにdevDependenciesを追加します。
  • $ 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をビルドしようとします。このプロセスにはPython 2.7.xが必要です（3.xは今日では動作しません）。加えて：

LibSassにはGCC 4.6+またはClang/LLVMが必要です。 OSが古い場合、このバージョンはコンパイルできません。 Windowsでは、GCC 4.6以降またはVS 2013 Update 4以降を備えたMinGWが必要です。 WindowsでClang/LLVMを使用してLibSassをビルドすることもできます。

197
Thoran

これらのツールのインストールは、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

5
Brian Ng

Windows 10でnode v6.11.2およびnpm v3.10.10を使用して、任意のフォルダーで直接実行するには：

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

node-sass Github の指示に従うだけです。

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

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

  2. 通常のコマンドラインShell（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およびnodeは引き続き実行できますが、モジュールbinファイルはしません！

前のシェルを閉じ、新しいシェルを再度開いて> node-gypまたは> node-sassを実行します。

注意：

  • windows-build-toolsは必要ないかもしれません（コンパイルが行われない場合？これらのツールをインストールせずに誰かが作成したかどうかを読みたいです）値としてGYP_MSVS_VERSIONを使用して、2015環境変数を管理アカウントに追加します。
  • > uglifyjs main.js main.min.jsや> mochaなどのbinファイルで他のモジュールを直接実行することもできます
2
Armfoot