如何使用node-sass（不使用Ruby）编译或转换sass / scss到css？

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

1. 安装libsass？
2. 从命令行使用它？
3. 使用它与任务跑步者如吞咽和咕噜？

我对于软件包pipe理者没有什么经验，对于任务跑步者我也没什么经验。

Answer 1

我select了libsass的node-sass实现者，因为它基于node.js。

安装节点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添加一个手表来更改文件。

更有用的选项，如“压缩” @在这里 。 命令行对于一个快速的解决scheme是很好的，但是，你可以使用像Grunt.js或Gulp.js这样的任务运行器来自动执行构build过程。

你也可以将上面的例子添加到npm脚本中。 要正确使用npm脚本作为吞噬的替代品，请阅读这篇全面的文章@ css-tricks.com，尤其是阅读有关分组任务的内容 。

• 如果运行$ npm init项目目录中没有package.json文件， $ npm init将创build一个。 用-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会编译你的文件。

如何使用吞咽

• $ npm install -g gulp gulp在全球安装Gulp。
• 如果运行$ npm init项目目录中没有package.json文件， $ npm init将创build一个。 用-y跳过问题。
• $ npm install --save-dev gulp gulp在本地安装Gulp。 --save-dev在package.json添加了devDependencies 。
• $ npm install gulp-sass --save-dev在本地安装gulp-sass。
• 使用以下内容在项目根文件夹中创build一个gulpfile.js文件，为您的项目设置gulpfile.js ：

 'use strict'; var gulp = require('gulp'); 

一个基本的例子transpile

将此代码添加到您的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）来构build，或者在我们的案例中是node-sass。 Node-sass包含默认使用的libsass的内置版本。 如果构build文件不能在你的机器上工作，它会尝试为你的机器构buildlibsass。 这个过程需要Python 2.7.x（3.x今天不工作）。 此外：

LibSass需要GCC 4.6+或Clang / LLVM。 如果你的操作系统比较老，这个版本可能不会编译。 在Windows上，您需要使用GCC 4.6+或VS 2013 Update 4+的MinGW。 也可以在Windows上使用Clang / LLVM构buildLibSass。

Answer 2

这些工具的安装可能在不同的操作系统上有所不同

在Windows下，node-sass目前默认支持VS2015，如果你的机器只有VS2013，并且在运行命令时遇到任何错误，你可以通过添加：–msvs_version = 2013来定义VS的版本。 这在node-sass npm页面上注明。

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

Answer 3

在使用节点v6.11.2和npm v3.10.10的 Windows 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. 检查您的本地帐户（不是系统） PATH环境variables是否包含：

    %userprofile%\AppData\Roaming\npm 

   如果这个path不存在， npm和节点仍然可以运行，但是模块bin文件不会！

closures以前的shell并重新打开一个新的shell并运行> node-gyp或> node-sass 。

注意：

• windows-build-tools 可能不是必须的 （如果没有编译完成，我想阅读是否有人在不安装这些工具的情况下进行编译），但是在pipe理员帐户中增加了GYP_MSVS_VERSION环境variables。
• 我也能够直接运行其他模块与bin文件，如> uglifyjs main.js main.min.js和> mocha