98

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

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

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

4

4 回答 4

249

我为 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

例子：

  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/"到文件scripts中。package.json它应该看起来像这样：
"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添加gulp到. devDependencies_package.json
  • $ 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运行上述任务，编译文件夹中的 .scss 文件并在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。

于 2015-07-16T08:03:44.010 回答
5

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

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

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

于 2015-12-08T04:51:00.580 回答
3

npx node-sass input.scss out.css

于 2021-07-12T12:03:08.120 回答
3

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

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

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

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

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

笔记：

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