如何使用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全局安装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运行上面的任务,编译文件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.

Answer 2

npx node-sass input.scss out.css

Answer 3

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

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

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

Answer 4

在 Windows 10 中使用Node v6.11.2和npm v3.10.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