[英]How to compile or convert sass / scss to css with node-sass (no Ruby)?
I was struggling with setting up libsass as it wasn't as straight-forward as the Ruby based transpiler. 我正在努力设置libsass,因为它不像基于Ruby的转换器那样直截了当。 Could someone explain how to:
有人可以解释如何:
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. 我为libsass选择了node-sass实现者,因为它基于node.js.
$ npm install -g node-sass
installs node-sass globally -g
. $ npm install -g node-sass
-sass全局安装node-sass -g
。 This will hopefully install all you need, if not read libsass at the bottom. 如果没有在底部读取libsass,这将有希望安装您所需要的一切。
General format: 一般格式:
$ node-sass [options] <input.scss> [output.css]
$ cat <input.scss> | node-sass > output.css
Examples: 例子:
$ node-sass my-styles.scss my-styles.css
compiles a single file manually. $ node-sass my-styles.scss my-styles.css
手动编译单个文件。 $ node-sass my-sass-folder/ -o my-css-folder/
compiles all the files in a folder manually. $ node-sass my-sass-folder/ -o my-css-folder/
手动编译文件夹中的所有文件。 $ node-sass -w sass/ -o css/
compiles all the files in a folder automatically whenever the source file(s) are modified. $ node-sass -w sass/ -o css/
编译文件夹中的所有文件。 -w
adds a watch for changes to the file(s). -w
添加一个监视文件的更改。 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.
命令行适用于快速解决方案,但是,您可以使用Grunt.js或Gulp.js等任务运行程序来自动化构建过程。
You can also add the above examples to npm scripts. 您还可以将上述示例添加到npm脚本中。 To properly use npm scripts as an alternative to gulp read this comprehensive article @ css-tricks.com especially read about grouping tasks .
要正确使用npm脚本作为gulp的替代方法,请阅读这篇全面的文章@ css-tricks.com,特别是阅读有关分组任务的内容 。
package.json
file in your project directory running $ npm init
will create one. package.json
文件运行$ npm init
将创建一个。 Use it with -y
to skip the questions. -y
一起使用可以跳过问题。 "sass": "node-sass -w sass/ -o css/"
to scripts
in package.json
file. "sass": "node-sass -w sass/ -o css/"
到package.json
文件中的scripts
中。 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. $ npm run sass
将编译你的文件。 $ npm install -g gulp
installs Gulp globally. $ npm install -g gulp
gulp全局安装Gulp。 package.json
file in your project directory running $ npm init
will create one. package.json
文件运行$ npm init
将创建一个。 Use it with -y
to skip the questions. -y
一起使用可以跳过问题。 $ npm install --save-dev gulp
installs Gulp locally. $ npm install --save-dev gulp
gulp在本地安装Gulp。 --save-dev
adds gulp
to devDependencies
in package.json
. --save-dev
增加了gulp
到devDependencies
中package.json
。 $ npm install gulp-sass --save-dev
installs gulp-sass locally. $ npm install gulp-sass --save-dev
在本地安装gulp-sass。 gulpfile.js
file in your project root folder with this content: gulpfile.js
文件来为项目设置gulpfile.js
: 'use strict';
var gulp = require('gulp');
A basic example to transpile 透明的基本例子
Add this code to your gulpfile.js: 将此代码添加到您的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
runs the above task which compiles .scss file(s) in the sass
folder and generates .css file(s) in the css
folder. $ gulp sass
运行上面的任务,编译sass
文件夹中的sass
文件,并在css
文件夹中生成.css文件。
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
: 将此代码添加到您的
gulpfile.js
:
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
All is set now! 现在一切都准备好了! Just run the watch task:
只需运行监视任务:
$ gulp sass:watch
As the name of node-sass implies, you can write your own node.js scripts for transpiling. 正如node-sass的名称所暗示的那样,您可以编写自己的node.js脚本进行转换。 If you are curious, check out node-sass project page.
如果您好奇,请查看node-sass项目页面。
Libsass is a library that needs to be built by an implementer such as sassC or in our case node-sass. Libsass是一个需要由sassC等实现者或我们的node-sass实现的库。 Node-sass contains a built version of libsass which it uses by default.
Node-sass包含默认使用的libsass的内置版本。 If the build file doesn't work on your machine, it tries to build libsass for your machine.
如果构建文件在您的计算机上不起作用,它会尝试为您的计算机构建libsass。 This process requires Python 2.7.x (3.x doesn't work as of today).
此过程需要Python 2.7.x(3.x目前无效)。 In addition:
此外:
LibSass requires GCC 4.6+ or Clang/LLVM.
LibSass需要GCC 4.6+或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+.
在Windows上,您需要具有GCC 4.6+或VS 2013 Update 4+的MinGW。 It is also possible to build LibSass with Clang/LLVM on Windows.
也可以在Windows上使用Clang / LLVM构建LibSass。
The installation of these tools may vary on different OS. 这些工具的安装可能因操作系统的不同而异。
Under Windows, node-sass currently supports VS2015 by default, if you only have VS2013 in your box and meet any error while running the command, you can define the version of VS by adding: --msvs_version=2013. 在Windows下,node-sass默认支持VS2015,如果你的盒子中只有VS2013并且在运行命令时遇到任何错误,你可以通过添加:--msvs_version = 2013来定义VS的版本。 This is noted on the node-sass npm page .
这在node-sass npm页面上有说明 。
So, the safe command line that works on Windows with VS2013 is: npm install --msvs_version=2013 gulp node-sass gulp-sass 因此,在Windows上使用VS2013的安全命令行是:npm install --msvs_version = 2013 gulp node-sass gulp-sass
In Windows 10 using node v6.11.2 and npm v3.10.10 , in order to execute directly in any folder: 在Windows 10中使用节点v6.11.2和npm v3.10.10 ,以便直接在任何文件夹中执行:
> node-sass [options] <input.scss> [output.css]
I only followed the instructions in node-sass Github : 我只遵循node-sass Github中的说明 :
Add node-gyp prerequisites by running as Admin in a Powershell (it takes a while): 通过在Powershell中以Admin身份运行来添加node-gyp先决条件 (需要一段时间):
> npm install --global --production windows-build-tools
In a normal command-line shell ( Win + R +cmd+ Enter ) run: 在正常的命令行 shell( Win + R + cmd + Enter )中运行:
> npm install -g node-gyp > npm install -g node-sass
The -g
places these packages under %userprofile%\\AppData\\Roaming\\npm\\node_modules
. -g
将这些包放在%userprofile%\\AppData\\Roaming\\npm\\node_modules
。 You may check that npm\\node_modules\\node-sass\\bin\\node-sass
now exists. 您可以检查
npm\\node_modules\\node-sass\\bin\\node-sass
现在是否存在。
Check if your local account (not the System) PATH
environment variable contains: 检查您的本地帐户(不是System)
PATH
环境变量是否包含:
%userprofile%\\AppData\\Roaming\\npm
If this path is not present, npm and node may still run, but the modules bin files will not! 如果此路径不存在,则npm和节点仍可以运行,但模块bin文件不会!
Close the previous shell and reopen a new one and run either > node-gyp
or > node-sass
. 关闭上一个shell并重新打开一个shell并运行
> node-gyp
或> node-sass
。
Note: 注意:
windows-build-tools
may not be necessary (if no compiling is done? I'd like to read if someone made it without installing these tools), but it did add to the admin account the GYP_MSVS_VERSION
environment variable with 2015
as a value. windows-build-tools
可能没有必要 (如果没有编译完成?我想读一下如果有人在没有安装这些工具的情况下编写它),但它确实在管理员帐户中添加了GYP_MSVS_VERSION
环境变量,其中2015
为值。 > uglifyjs main.js main.min.js
and > mocha
> uglifyjs main.js main.min.js
和> mocha
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.