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

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

提问by Thoran

I was struggling with setting up libsass as it wasn't as straight-forward as the Ruby based transpiler. Could someone explain how to:

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

1. install libsass?
2. use it from command line?
3. use it with task runners like gulp and grunt?

1. 安装libsass？
2. 从命令行使用它？
3. 将它与 gulp 和 grunt 等任务运行程序一起使用？

I have little experience with package managers and even less so with task runners.

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

回答by Thoran

I picked node-sass implementer for libsass because it is based on node.js.

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

Installing node-sass

安装 node-sass

• (Prerequisite) If you don't have npm, install Node.jsfirst.
• $ npm install -g node-sassinstalls node-sass globally -g.

• （前提）如果您没有NPM，安装Node.js的第一次。
• $ npm install -g node-sass全局安装 node-sass -g。

This will hopefully install all you need, if not read libsass at the bottom.

如果没有阅读底部的 libsass，这有望安装您需要的所有内容。

How to use node-sass from Command line and npm scripts

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

General format:

一般格式：

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

Examples:

例子：

1. $ node-sass my-styles.scss my-styles.csscompiles a single file manually.
2. $ node-sass my-sass-folder/ -o my-css-folder/compiles all the files in a folder manually.
3. $ node-sass -w sass/ -o css/compiles all the files in a folder automatically whenever the source file(s) are modified. -wadds a watch for changes to the file(s).

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添加对文件更改的监视。

More usefull options like 'compression' @ here. Command line is good for a quick solution, however, you can use task runners like Grunt.js or Gulp.js to automate the build process.

更有用的选项，如 'compression' @ here。命令行适用于快速解决方案，但是，您可以使用 Grunt.js 或 Gulp.js 等任务运行器来自动化构建过程。

You can also add the above examples to npm scripts. To properly use npm scripts as an alternative to gulpread this comprehensive article @ css-tricks.comespecially read about grouping tasks.

您还可以将上述示例添加到 npm 脚本中。要正确使用 npm 脚本作为gulp的替代方案，请阅读这篇综合文章@css-tricks.com，特别是阅读有关分组任务的内容。

• If there is no package.jsonfile in your project directory running $ npm initwill create one. Use it with -yto skip the questions.
• Add "sass": "node-sass -w sass/ -o css/"to scriptsin package.jsonfile. It should look something like this:

• 如果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 sasswill compile your files.

• $ npm run sass将编译您的文件。

How to use with gulp

如何与 gulp 一起使用

• $ npm install -g gulpinstalls Gulp globally.
• If there is no package.jsonfile in your project directory running $ npm initwill create one. Use it with -yto skip the questions.
• $ npm install --save-dev gulpinstalls Gulp locally. --save-devadds gulpto devDependenciesin package.json.
• $ npm install gulp-sass --save-devinstalls gulp-sass locally.
• Setup gulp for your project by creating a gulpfile.jsfile in your project root folder with this content:

• $ 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');

A basic example to transpile

转译的基本示例

Add this code to your gulpfile.js:

将此代码添加到您的 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 sassruns the above task which compiles .scss file(s) in the sassfolder and generates .css file(s) in the cssfolder.

$ gulp sass运行上述任务，该任务在sass文件夹中编译 .scss 文件并在文件夹中生成 .css 文件css。

To make life easier, let's add a watch so we don't have to compile it manually. Add this code to your gulpfile.js:

为了让生活更轻松，让我们添加一个手表，这样我们就不必手动编译它。将此代码添加到您的gulpfile.js：

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

All is set now! Just run the watch task:

一切就绪！只需运行 watch 任务：

$ gulp sass:watch

How to use with Node.js

如何与 Node.js 一起使用

As the name of node-sass implies, you can write your own node.js scripts for transpiling. If you are curious, check out node-sass project page.

正如 node-sass 的名称所暗示的那样，您可以编写自己的 node.js 脚本进行转译。如果您好奇，请查看 node-sass 项目页面。

What about libsass?

libsass 呢？

Libsass is a library that needs to be built by an implementer such as sassC or in our case node-sass. Node-sass contains a built version of libsass which it uses by default. If the build file doesn't work on your machine, it tries to build libsass for your machine. This process requires Python 2.7.x (3.x doesn't work as of today). In addition:

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.

LibSass 需要 GCC 4.6+ 或 Clang/LLVM。如果您的操作系统较旧，则此版本可能无法编译。在 Windows 上，您需要带有 GCC 4.6+ 或 VS 2013 Update 4+ 的 MinGW。也可以在 Windows 上使用 Clang/LLVM 构建 LibSass。

回答by Brian Ng

The installation of these tools may vary on different OS.

这些工具的安装可能因不同的操作系统而异。

Under Windows, node-sass currently supports VS2015 by default, if you only have VS2013 in your box and meet any error while running the command, you can define the version of VS by adding: --msvs_version=2013. This is noted on the node-sass npm page.

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

So, the safe command line that works on Windows with VS2013 is: npm install --msvs_version=2013 gulp node-sass gulp-sass

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

回答by Armfoot

In Windows 10 using node v6.11.2and npm v3.10.10, in order to execute directly in any folder:

在 Windows 10 中使用node v6.11.2和npm v3.10.10，为了直接在任何文件夹中执行：

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

I only followed the instructions in node-sass Github:

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

1. Add node-gyp prerequisitesby running as Admin in a Powershell (it takes a while):

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

2. In a normal command-lineshell (Win+R+cmd+Enter) run:

   > npm install -g node-gyp
   > npm install -g node-sass
   

   The -gplaces these packages under %userprofile%\AppData\Roaming\npm\node_modules. You may check that npm\node_modules\node-sass\bin\node-sassnow exists.

3. Check if your local account (not the System)PATHenvironment variable contains:

   %userprofile%\AppData\Roaming\npm
   

   If this path is not present, npmand nodemay still run, but the modules binfiles will not!

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文件不会！

Close the previous shelland reopen a new one and run either > node-gypor > node-sass.

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

Note:

笔记：

• The windows-build-toolsmay not be necessary(if no compiling is done? I'd like to read if someone made it without installing these tools), but it did add to the admin account the GYP_MSVS_VERSIONenvironment variable with 2015as a value.
• I am also able to run directly other modules with binfiles, such as > uglifyjs main.js main.min.jsand > mocha

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