如何编译或转换sass / scss到css与node-sass（没有Ruby）？ [英] How to compile or convert sass / scss to css with node-sass (no Ruby)?

问题描述

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

1. 安装libsass？

我对包管理器没有什么经验，

解决方案

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

安装node-sass

• （先决条件）如果您没有npm ，首先安装 Node.js 。


• $ npm install -g node- sass 全局安装节点sass -g 。

<

如何从命令行和npm脚本使用node-sass

$

b
$ b

一般格式：

  $ node-sass [options]< input.scss& [output.css] cat< input.scss> |节点sass> output.css 
  

示例：

1. $ node-sass my-styles.scss my-styles.css 手动编译单个文件。


2. $ node-sass my-sass-folder / -o my-css-folder / 手动编译文件夹中的所有文件。

$ 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 文件中。它应该看起来像这样：



  ：{
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 code> package.json 。


• $ npm install gulp-sass --save-dev
  在项目根目录下创建一个 gulpfile.js 内容：

 'use strict'; 
 var gulp = require（'gulp'）; 
  

Transpile的基本示例

将此代码添加到您的gulpfile.js中：

  var sass = require（'gulp-sass'） ; 
 gulp.task（'sass'，function（）{
 gulp.src（'./ sass / ** / *。scss'）
 .pipe '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。

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.

解决方案

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

Installing node-sass

• (Prerequisite) If you don't have npm, install Node.js first.
• $ npm install -g node-sass installs node-sass globally -g.

This will hopefully install all you need, if not read libsass at the bottom.

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-sass-folder/ -o my-css-folder/ compiles all the files in a folder manually.
3. $ 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).

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.

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.

• 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.
• Add "sass": "node-sass -w sass/ -o css/" to scripts in package.json file. It should look something like this:

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

• $ npm run sass will compile your files.

How to use with gulp

• $ npm install -g gulp installs Gulp globally.
• 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 install --save-dev gulp installs Gulp locally. --save-dev adds gulp to devDependencies in package.json.
• $ npm install gulp-sass --save-dev installs gulp-sass locally.
• Setup gulp for your project by creating a gulpfile.js file in your project root folder with this content:

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

A basic example to transpile

Add this code to your gulpfile.js:

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.

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:

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.

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 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.

这篇关于如何编译或转换sass / scss到css与node-sass（没有Ruby）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！