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

Question

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

安装 libsass？
从命令行使用它？
将它与 gulp 和 grunt?

我对包管理器的经验很少，对任务运行器的经验就更少了。

Answer 1

我为 libsass 选择了 node-sass 实现者，因为它基于 node.js.

正在安装节点-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 scripts中。要正确使用 npm 脚本作为 gulp 的 替代品，请阅读 this comprehensive article @ css-tricks.com especially read about grouping tasks.

如果您的项目目录中没有 package.json 文件运行ning $ 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 文件运行ning $ npm init 将创建一个。与 -y 一起使用可跳过问题。

$ npm install --save-dev gulp 在本地安装 Gulp。 --save-dev 将 gulp 添加到 package.json 中的 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 运行s 上述任务在sass文件夹中编译.scss文件并生成.css文件（ s) 在 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 requires GCC 4.6+ or Clang/LLVM. If your OS is older, this version may not compile. On Windows, you need MinGW with GCC 4.6+ or VS 2013 Update 4+. It is also possible to build LibSass with Clang/LLVM on Windows.

Answer 2

这些工具的安装可能因 OS。

而异

在Windows下，node-sass目前默认支持VS2015，如果你的盒子里只有VS2013并且在运行命令的时候遇到任何错误，你可以定义VS 版本添加：--msvs_version=2013。 node-sass npm page.

上注明了这一点

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

Answer 3

在Windows10中使用node v6.11.2和npm v3.10.10，以便直接在任何文件夹：

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

我只按照 node-sass Github 中的说明操作：

通过运行ning 作为管理员在 Powershell 添加 node-gyp prerequisites（需要一段时间）：
```
> npm install --global --production windows-build-tools
```
在普通命令行 shell (Win+R +cmd+输入) 运行:
```
> 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 文件不会！

关闭之前的 shell 并重新打开一个新的运行 > node-gyp 或 > node-sass.

注：

windows-build-tools可能不需要（如果没有编译完成？我想看看是否有人没有安装这些工具就做了），但是它确实向管理员帐户添加了 GYP_MSVS_VERSION 环境变量，其值为 2015。
我也可以运行直接使用 bin 文件的其他模块，例如 > uglifyjs main.js main.min.js 和 > mocha

Answer 4

npx node-sass input.scss out.css

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

How to compile or convert sass / scss to css with node-sass (no Ruby)?

css

sass

node-sass

gulp-sass

libsass

正在安装节点-sass

如何从命令行和 npm 脚本使用 node-sass

如何与gulp

如何与Node.js

libsass呢？