如何使用node-sass(没有Ruby)编译或转换sass / scss到css ?

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. 安装libsass ?
3. use it from command line?
4. 从命令行使用它?
5. use it with task runners like gulp and grunt?
6. 用它来对付像吞咽和咕哝这样的任务跑者?

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

我对包管理器没有什么经验，甚至对任务跑者也没有什么经验。

3 个解决方案

#1

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

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

Installing node-sass

• (Prerequisite) If you don't have npm, install Node.js first.
• (先决条件)如果没有npm，请安装节点。js。
• $ npm install -g node-sass installs node-sass globally -g.
• $ npm安装- gnode -sass在全球安装node-sass。

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

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.css compiles a single file manually.
2. 美元node-sass my styles。scss my styles。css手动编译一个文件。
3. $ node-sass my-sass-folder/ -o my-css-folder/ compiles all the files in a folder manually.
4. $ node-sass my-sass-folder/ -o my-css-folder/手工编译文件夹中的所有文件。
5. $ node-sass -w sass/ -o css/ compiles all the files in a folder automatically whenever the source file(s) are modified. -w adds a watch for changes to the file(s).
6. $ 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.

更多有用的选项，如“压缩”@这里。命令行是快速解决方案的好方法，但是，您可以使用任务运行程序，比如Grunt。js或吞咽。js使构建过程自动化。

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

您还可以将上述示例添加到npm脚本中。要正确地使用npm脚本作为gulp的替代品，请阅读这篇全面的文章，特别是关于分组任务的文章。

• If there is no package.json file in your project directory running $ npm init will create one. Use it with -y to skip the questions.
• 如果没有包装的话。运行$ npm init的项目目录中的json文件将创建一个。用它和-y一起跳过问题。
• Add "sass": "node-sass -w sass/ -o css/" to scripts in package.json file. It should look something like this:
• 添加“sass”:“node-sass -w sass/ -o css/”到包中的脚本。json文件。它应该是这样的:

"scripts": {
    "test" : "bla bla bla",
    "sass": "node-sass -w sass/ -o css/"
 }

• $ npm run sass will compile your files.
• $ npm运行sass将编译您的文件。

How to use with gulp

• $ npm install -g gulp installs Gulp globally.
• $ npm安装-g gulp在全球安装gulp。
• If there is no package.json file in your project directory running $ npm init will create one. Use it with -y to skip the questions.
• 如果没有包装的话。运行$ npm init的项目目录中的json文件将创建一个。用它和-y一起跳过问题。
• $ npm install --save-dev gulp installs Gulp locally. --save-dev adds gulp to devDependencies in package.json.
• $ npm安装——save-dev gulp在本地安装gulp。-save-dev在packag .json中向devDependencies添加了gulp。
• $ npm install gulp-sass --save-dev installs gulp-sass locally.
• $ npm安装gulp-sass——save-dev在本地安装gulp-sass。
• Setup gulp for your project by creating a gulpfile.js file in your project root folder with this content:
• 通过创建一个gulpfile为您的项目设置gulp。项目根文件夹中的js文件包含以下内容:

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

A basic example to transpile

一个基本的例子

Add this code to your gulpfile.js:

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

$ 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:

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

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

All is set now! Just run the watch task:

现在所有的设置!只需要执行观察任务:

$ gulp sass:watch

How to use with 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的名称所暗示的，您可以编写自己的节点。为transpiling js脚本。如果您感兴趣，请查看node-sass项目页面。

What about 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更新4+。还可以在Windows上使用Clang/LLVM构建LibSass。

#2

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页面上得到了注意。

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

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

#3

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

在Windows 10中使用节点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 prerequisites by running as Admin in a Powershell (it takes a while):

   在Powershell中以Admin身份运行以增加节点-gyp先决条件(需要一段时间):

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

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

   在一个普通的命令行shell中(Win+R+cmd+Enter)运行:

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

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

   g将这些包放置在%userprofile%\AppData\漫游\npm\node_modules下。您可以检查npm\node_modules\node-sass\bin\node-sass现在存在。

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

   检查您的本地帐户(非系统)路径环境变量是否包含:

   %userprofile%\AppData\Roaming\npm
   

   If this path is not present, npm and node may still run, but the modules bin files will not!

   如果此路径不存在，则npm和节点可能仍然运行，但是模块bin文件将不会运行!

Close the previous shell and reopen a new one and run either > node-gyp or > node-sass.

关闭前一个shell并重新打开一个新的shell，运行>节点-gyp或>节点-sass。

Note:

注意:

• The windows-build-tools may 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_VERSION environment variable with 2015 as a value.
• windows构建工具可能不需要(如果没有编译的话?)我想看看是否有人在不安装这些工具的情况下完成了它)，但是它确实为管理帐户添加了石膏msvs_version环境变量，值为2015。
• I am also able to run directly other modules with bin files, such as > uglifyjs main.js main.min.js and > mocha
• 我还可以直接运行其他带有bin文件的模块，比如> uglifyjs main。js main.min。js和>摩卡