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

Question

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

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

我对包管理器的经验很少，对于任务运行者来说更是如此。

Answer 1

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

安装node-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添加一个监视文件的更改。

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

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

• 如果项目目录中没有package.json文件运行$ 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全局安装Gulp。
• 如果项目目录中没有package.json文件运行$ npm init将创建一个。 与-y一起使用可以跳过问题。
• $ npm install --save-dev gulp gulp在本地安装Gulp。 --save-dev增加了gulp到devDependencies中package.json 。
• $ npm install gulp-sass --save-dev在本地安装gulp-sass。
• 通过使用以下内容在项目根文件夹中创建gulpfile.js文件来为项目设置gulpfile.js ：

'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文件夹中的sass文件，并在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。

Answer 2

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

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

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

Answer 3

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

    %userprofile%\\AppData\\Roaming\\npm 

   如果此路径不存在，则npm和节点仍可以运行，但模块bin文件不会！

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

注意：

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