如何使用node-sass（沒有Ruby）將sass / scss編譯或轉換為css？

Question

我正在努力設置libsass，因為它不像基於Ruby的轉換器那樣直截了當。 有人可以解釋如何：

1. 安裝libsass？
2. 從命令行使用它？
3. 將它與gulp和grunt等任務運行者一起使用？

我對包管理器的經驗很少，對於任務運行者來說更是如此。

Answer 1

我為libsass選擇了node-sass實現者，因為它基於node.js.

安裝node-sass

• （先決條件）如果您沒有npm，請先安裝Node.js.
• $ npm install -g node-sass -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添加一個監視文件的更改。

更有用的選項，如'壓縮' @這里 。 命令行適用於快速解決方案，但是，您可以使用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全局安裝Gulp。
• 如果項目目錄中沒有package.json文件運行$ npm init將創建一個。 與-y一起使用可以跳過問題。
• $ npm install --save-dev gulp gulp在本地安裝Gulp。 --save-dev增加了gulp到devDependencies中package.json 。
• $ npm install gulp-sass --save-dev在本地安裝gulp-sass。
• 通過使用以下內容在項目根文件夾中創建gulpfile.js文件來為項目設置gulpfile.js ：

'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文件夾中的sass文件，並在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。 如果您的操作系統較舊，則此版本可能無法編譯。 在Windows上，您需要具有GCC 4.6+或VS 2013 Update 4+的MinGW。 也可以在Windows上使用Clang / LLVM構建LibSass。

Answer 2

這些工具的安裝可能因操作系統的不同而異。

在Windows下，node-sass默認支持VS2015，如果你的盒子中只有VS2013並且在運行命令時遇到任何錯誤，你可以通過添加：--msvs_version = 2013來定義VS的版本。 這在node-sass npm頁面上有說明 。

因此，在Windows上使用VS2013的安全命令行是：npm install --msvs_version = 2013 gulp node-sass gulp-sass

Answer 3

在Windows 10中使用節點v6.11.2和npm v3.10.10 ，以便直接在任何文件夾中執行：

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

我只遵循node-sass Github中的說明 ：

1. 通過在Powershell中以Admin身份運行來添加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. 檢查您的本地帳戶（不是System） PATH環境變量是否包含：

    %userprofile%\\AppData\\Roaming\\npm 

   如果此路徑不存在，則npm和節點仍可以運行，但模塊bin文件不會！

關閉上一個shell並重新打開一個shell並運行> node-gyp或> node-sass 。

注意：

• windows-build-tools 可能沒有必要 （如果沒有編譯完成？我想讀一下如果有人在沒有安裝這些工具的情況下編寫它），但它確實在管理員帳戶中添加了GYP_MSVS_VERSION環境變量，其中2015為值。
• 我也可以使用bin文件直接運行其他模塊，例如> uglifyjs main.js main.min.js和> mocha