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

Posted 2023-02-16

【中文标题】如何使用 node-sass（无 Ruby）编译或转换 sass / scss 为 css？

【英文标题】：How to compile or convert sass / scss to css with node-sass (no Ruby)?

【发布时间】：2015-10-05 12:56:29

【问题描述】：

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

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

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

【参考方案1】：

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

安装 node-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 增加了对文件更改的监视。

更多有用的选项，例如“压缩”@ here。命令行非常适合快速解决方案，但是，您可以使用 Grunt.js 或 Gulp.js 等任务运行器来自动化构建过程。

您还可以将上述示例添加到 npm 脚本中。要正确使用 npm 脚本作为 gulp 的替代方法，请阅读 this comprehensive article @ css-tricks.com，尤其是阅读 grouping tasks。

如果您的项目目录中没有package.json 文件，运行$ npm init 将创建一个。与-y 一起使用可跳过问题。 在package.json 文件中将"sass": "node-sass -w sass/ -o css/" 添加到scripts。它应该看起来像这样：

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

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

如何使用 gulp

$ npm install -g gulp 在全球范围内安装 Gulp。 如果您的项目目录中没有package.json 文件，运行$ npm init 将创建一个。与-y 一起使用可跳过问题。 $ npm install --save-dev gulp 在本地安装 Gulp。 --save-dev 在package.json 中将gulp 添加到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 运行上述任务，编译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 等实现者构建的库，在我们的例子中是 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。

【讨论】：

@PublicHandle 也许这就是原因，我不记得了。 node-sass在gulp-sass's dependencies中，所以不需要在本地安装。

@PublicHandle 如果要从命令行运行 gulp 任务，则需要全局安装 gulp。

@Thoran 嗯，如果 node-sass 是 gulp-sass 的依赖项，那么它在本地不需要，而 gulp 本身在两个地方都需要，所以它可以在命令行上运行并被包含在项目中的依赖项。再次感谢，精彩的文章！

@Thoran 我试图找出是否可以避免使用像 gulp 或 grunt 这样的任务运行程序，并编写一个简单的 npm 脚本来满足我的需要。我查看了 node-sass，命令行显然使用 glob 并循环文件。我想最好简单地复制该代码。

所以为了避免使用 Ruby，可以使用 node.js，一个特定版本的 Python AND如果使用 Windows，需要编译一个 C++ 库吗？这大大简化了事情。

【参考方案2】：

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

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

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

【参考方案3】：

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

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

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

通过在 Powershell 中以管理员身份运行添加 node-gyp prerequisites（需要一段时间）：

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

在普通命令行 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 现在是否存在。

检查您的本地帐户（不是系统） PATH 环境变量是否包含：

%userprofile%\AppData\Roaming\npm

如果此路径不存在，npm 和 node 可能仍然运行，但模块 bin 文件不会！

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

注意：

windows-build-tools

可能没有必要

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

【参考方案4】：

npx node-sass input.scss out.css