如何使用node-sass(没有Ruby)将sass / scss编译或转换为css?

时间:2015-07-16 07:38:40

标签: css sass gulp-sass node-sass libsass

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

  1. 安装libsass?
  2. 从命令行使用它吗?
  3. 将它与gulp和grunt等任务运行器一起使用?
  4. 我对包管理器的经验很少,对于任务运行者来说更是如此。

4 个答案:

答案 0 :(得分:195)

我为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. 只要修改了源文件,
  4. $ node-sass -w sass/ -o css/就会自动编译文件夹中的所有文件。 -w添加了一个监视文件的更改。
  5. 更有用的选项,例如'compression'@ here。命令行适用于快速解决方案,但是,您可以使用Grunt.js或Gulp.js等任务运行程序来自动化构建过程。

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

    • 如果项目目录中没有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-devgulp添加到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。

答案 1 :(得分:5)

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

在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

答案 2 :(得分:2)

在Windows 10中使用节点v6.11.2 npm v3.10.10 ,以便直接在任何文件夹中执行:

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

我只关注node-sass Github中的说明:

  1. 通过在Powershell中以管理员身份运行来添加node-gyp prerequisites(需要一段时间):

    > 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 文件不会运行!

  4. 关闭上一个shell 并重新打开一个新的并运行> node-gyp> node-sass

    注意:

    • windows-build-tools 可能没有必要(如果没有进行编译?我想阅读是否有人在没有安装这些工具的情况下进行了编译),但它确实添加到了管理员使用GYP_MSVS_VERSION作为值来记录2015环境变量。
    • 我还可以使用 bin 文件直接运行其他模块,例如> uglifyjs main.js main.min.js> mocha

答案 3 :(得分:0)

npx node-sass input.scss out.css