让 SASS 使用 NodeJS Express 和 node-sass 自动编译

Posted 2023-03-06

【中文标题】让 SASS 使用 NodeJS Express 和 node-sass 自动编译

【英文标题】：Get SASS to autocompile with NodeJS Express and node-sass

【发布时间】：2014-07-05 21:18:03

【问题描述】：

我正在使用 node.js 进行开发，而不是编写 css，而是想编写每当我刷新页面时自动编译的 SCSS 文件。

在使用 NodeJS、Express 和 node-sass 时如何让 SASS 文件自动编译。

【参考方案1】：

更新（2014 年 12 月 7 日）

node-sass 的连接中间件已提取到node-sass-middleware，见this answer

---

安装 node-sass

在你的项目文件夹中运行：

$ npm install node-sass

修改 app.js

假设您使用

生成了您的应用程序

$ express my_app

您的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'));
);

....

以下是修改：

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' ) ) );
);

需要注意的是

app.use( sass.middleware ... );

必须先于

app.use( express.static ... )

原因是我们首先希望 sass 编译任何已更改的 sass 文件，然后才提供它们（由 express.static 完成）。

重启你的应用

您必须重新启动应用才能使这些更改生效。

在某处包含它以便编译

我们现在可以将app.scss 包含在我们的/sass 文件夹中。但它还不会编译。 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")                 < we've added this
  body!= body `/views/layout.jade`

请注意，与 stylesheets 子文件夹下的 style.css 不同，app.css 是从根目录读取的（在本例中为 /public）。

修复路径

有

  app.use(
     sass.middleware(
         src: __dirname + '/sass', 
         dest: __dirname + '/public',
         debug: true,       
     )
  );

第一次编译后，文件和文件夹层次结构如下：

Project folder
    app.js
    public
        app.css           < This is where the compiled file goes
        sytlesheets
            style.css
    sass
        app.scss          < This is where the sass file is

您可能希望将编译后的输出放在stylesheets 文件夹中，而不是public 文件夹中；像这样：

Project folder
    app.js
    public
        sytlesheets
            app.css
            style.css
    sass
        app.scss

这样，视图将链接到 css 文件，如下所示：

link(rel='stylesheet', href='/stylesheets/style.css')
link(rel="stylesheet", href="/stylesheets/app.css")

但是，如果将 sass 中间件配置更改为

  app.use(
     sass.middleware(
         src: __dirname + '/sass', 
         dest: __dirname + '/public/stylesheets',
         debug: true,       
     )
  );

事情会变成梨形。

当像这样链接到 css 文件时：

link(rel="stylesheet", href="stylesheets/app.css")

生成的请求将针对stylesheets/app.css。但是由于我们为 sass 中间件提供了以下配置：

src: __dirname + '/sass',

它会去寻找/sass/stylesheets/app.scss，但不存在这样的文件。

一种解决方案是保持配置不变，但将所有 sass 文件放在子文件夹 `/sass/stylesheets/.但有更好的解决方案。

如果你像这样定义前缀配置：

app.use(
    sass.middleware(
        src: __dirname + '/sass', 
        dest: __dirname + '/public/stylesheets',
        prefix:  '/stylesheets',                    // We've added prefix
     )
);  

它将告诉 sass 编译器请求文件将始终以 /stylesheets 为前缀，并且应忽略此前缀，因此对于 /stylesheets/app.css 的请求，sass 中间件将查找文件 /sass/app.scss 而不是 @ 987654354@.

最终代码

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

doctype html
html(lang="en")
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel="stylesheet", href="/stylesheets/app.css")
  body!= body

文件夹和文件

Project folder
    app.js
    public
        sytlesheets
            app.css
            style.css
    sass
        app.scss

【讨论】：

如果是这样，您应该接受您的答案作为正确答案。

虽然我现在在此@knyan 的顶部看到您的更新，但我最初错过了它。有什么办法让它更加突出？

@Pandem1c，我已经尽力了。感谢您举报！

+1 表示“重要的是要注意 sassMiddleware 必须在 express.static 之前”。为我节省了大量的时间和精力

当我尝试运行 sass.middleware 时，它​​说 sass.middleware 不是函数

【参考方案2】：

来自node-sass 的连接中间件已被提取到node-sass-middleware。使用如下：

var fs = require('fs'),
  path = require('path'),
  express = require('express'),
  sassMiddleware = require('node-sass-middleware')

var app = module.exports = express();

// adding the sass middleware
app.use(
  sassMiddleware(
    src: __dirname + '/sass',
    dest: __dirname + '/src/css',
    debug: true,
  )
);

// The static middleware must come after the sass middleware
app.use(express.static(path.join(__dirname, 'public')));

【讨论】：

您应该在answer by izhaki 上添加评论，以便用户更容易找到您的宝贵信息:-)

@Oliver 他们只需向下滚动一点点。如果您觉得我的回答有帮助，可以点赞；）

@kynan 如果其中的详细信息不正确，请随时编辑我的帖子。 （自从发布以来，我现在正在用 grunt 做我的 sass，所以实际上不再使用我帖子中的代码来检查！）

或者至少在顶部添加一条评论，并用“更新”链接到您的答案。

@Izhaki 完成。如果您认为现在更相关，请随时接受此答案。