如何使用node-sass（无Ruby）将sass / scss编译或转换为CSS？

Question 1

我正在努力设置libsass，因为它不像基于Ruby的编译器那样简单。有人可以解释如何：

安装libsass？
从命令行使用它？
与gulp和grunt等任务赛跑者一起使用吗？

我对程序包经理的经验很少，而对任务执行者的经验则更少。

Question 2

我选择libsass的node-sass实现器，因为它基于node.js。

安装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

例子：

$ 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脚本代替gulp，请阅读这篇综合文章@ 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 gulp在本地安装Gulp。--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。此过程需要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。

Question 3

这些工具的安装在不同的OS上可能会有所不同。

在Windows下，node-sass当前默认情况下支持VS2015，如果您的包装箱中只有VS2013，并且在运行命令时遇到任何错误，则可以通过添加--msvs_version = 2013来定义VS的版本。这在node-sass npm页面上有所记录。

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

Question 4

在使用节点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
```
在普通的命令行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现在是否存在。
检查您的本地帐户（不是系统） PATH环境变量是否包含：
```
%userprofile%\AppData\Roaming\npm
```
如果不存在此路径，则npm和node可能仍在运行，但是模块bin文件将不会运行！

关闭上一个外壳，然后重新打开一个新外壳，然后运行> node-gyp或> node-sass。

注意：

该windows-build-tools 可能没有必要（如果没有编译做？我想阅读，如果有人提出它没有安装这些工具），但它并添加到管理员帐户GYP_MSVS_VERSION的环境变量，2015作为一种价值。
我还可以直接使用bin文件运行其他模块，例如> uglifyjs main.js main.min.js和> mocha