65
Update (7 Dec 2014)
The connect middleware from node-sass has been extracted into node-sass-middleware, see this answer
来自node-sass的连接中间件已被提取到node-sass-middleware中，请参阅此答案
Install node-sass
In you project folder run:
在你的项目文件夹中运行：
$ npm install node-sass
Modify app.js
Assuming you have generated your app using
假设您已使用生成应用程序
$ express my_app
Your app.js should look somewhat like this:
你的app.js应该看起来像这样：
var express = require('express'),
routes = require('./routes');
var app = module.exports = express.createServer();
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});
....
Here are the modifications:
以下是修改：
var express = require('express'),
routes = require('./routes'),
sass = require('node-sass'), // We're adding the node-sass module
path = require('path'); // Also loading the path module
var app = module.exports = express.createServer();
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
// notice that the following line has been removed
// app.use(express.static(__dirname + '/public'));
// adding the sass middleware
app.use(
sass.middleware({
src: __dirname + '/sass',
dest: __dirname + '/public',
debug: true,
})
);
// The static middleware must come after the sass middleware
app.use(express.static( path.join( __dirname, 'public' ) ) );
});
It is important to note that
重要的是要注意到这一点
app.use( sass.middleware ... );
must come before
必须来之前
app.use( express.static ... )
The reason is that we first want sass to compile any sass files that has changed, only then serve them (which is done by express.static).
原因是我们首先要求sass编译任何已更改的sass文件，然后才对它们进行服务（由express.static完成）。
Restart your app
You'd have to restart your app in order for these changes to take place.
您必须重新启动应用才能进行这些更改。
Include it somewhere so it compiles
We can now include app.scss in our /sass folder. But it won't compile just yet. The sass middleware will only compile files that are requested by your applications, so we must include the (to be rendered) css file somewhere, like in `/views/layout.jade':
我们现在可以在/ sass文件夹中包含app.scss。但它还不会编译。 sass中间件只会编译应用程序请求的文件，因此我们必须在某处包含（待渲染）css文件，例如`/views/layout.jade'：
doctype html
html(lang="en")
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel="stylesheet", href="app.css")
Notice that unlike style.css which is under the stylesheets sub-folder, the app.css is read from the root (in this case /public).
请注意，与stylesheets子文件夹下的style.css不同，app.css是从根目录读取的（在本例中为/ public）。
Fixing paths
With
同
app.use(
sass.middleware({
src: __dirname + '/sass',
dest: __dirname + '/public',
debug: true,
})
);
After the first compilation, the file and folder hierarchy will look like so:
第一次编译后，文件和文件夹层次结构将如下所示：
Project folder
app.js
public
app.css
You may want to have the compiled output in the stylesheets folder, rather than the public one; like so:
您可能希望将已编译的输出放在stylesheets文件夹中，而不是公共文件夹;像这样：
Project folder
app.js
public
sytlesheets
app.css
style.css
sass
app.scss
This way, the view will link to the css files like so:
这样，视图将链接到css文件，如下所示：
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel="stylesheet", href="/stylesheets/app.css")
However, if you change the sass middleware configuration to
但是，如果您将sass中间件配置更改为
app.use(
sass.middleware({
src: __dirname + '/sass',
dest: __dirname + '/public/stylesheets',
debug: true,
})
);
things will go pear shape.
事情会变成梨形。
When linking to the css file like so:
当链接到css文件时，如下所示：
link(rel="stylesheet", href="stylesheets/app.css")
the resultant request will be for stylesheets/app.css. But since we gave the sass middleware the following config:
结果请求将用于stylesheets / app.css。但是因为我们给了sass中间件以下配置：
src: __dirname + '/sass',
it will go and look for /sass/stylesheets/app.scss, and no such file exists.
它会去寻找/sass/stylesheets/app.scss，并且不存在这样的文件。
One solution is to keep the config as is, but the put all sass files in the subfolder `/sass/stylesheets/. But there is a better solution.
一种解决方案是保持配置不变，但将所有sass文件放在子文件夹`/ sass / stylesheets /中。但是有一个更好的解决方案。
If you define a prefix config like so:
如果您定义前缀配置，如下所示：
app.use(
sass.middleware({
src: __dirname + '/sass',
dest: __dirname + '/public/stylesheets',
prefix: '/stylesheets', // We've added prefix
})
);
it will tell the sass compiler that request file will always be prefixed with /stylesheets and this prefix should be ignored, thus for a request for /stylesheets/app.css, the sass middleware will look for the file /sass/app.scss rather than /sass/stylesheets/app.scss.
它将告诉sass编译器请求文件将始终以/ stylesheets为前缀，并且应该忽略此前缀，因此对于/stylesheets/app.css的请求，sass中间件将查找文件/sass/app.scss而不是比/sass/stylesheets/app.scss。
Final code
app.js
app.js
var express = require('express'),
routes = require('./routes'),
sass = require('node-sass'),
path = require('path');
var app = module.exports = express.createServer();
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(
sass.middleware({
src: __dirname + '/sass',
dest: __dirname + '/public/stylesheets',
prefix: '/stylesheets',
debug: true,
})
);
app.use(express.static(path.join(__dirname, 'public')));
});
layout.jade
layout.jade
doctype html
html(lang="en")
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel="stylesheet", href="/stylesheets/app.css")
body!= body
Folders and files
文件夹和文件
Project folder
app.js
public
sytlesheets
app.css
style.css
sass
app.scss
京公网安备 11010802041100号