7

私はスタイラス0.37.0でexpress.js 3.4.0を実行しています。エクスプレスとスタイラスを連携させようとしています。そのため、実際には別の場所にあるスタイラスファイルであるcssファイルをリクエストすると、エクスプレスがスタイラスをトリガーしてコンパイルしてから提供します（多くのチュートリアルで動作しているように見えるので、かなり標準的だと思います）。

私のファイル構造:

myApp
  resources
    stylus
      style.styl
  public
    css

私の app.js (関連する行のみ):

app.use("/static", express.static(__dirname + "/public"));
app.use(stylus.middleware({
    src: __dirname + "/resources/stylus",
    dest: __dirname + "/public/css",
    debug: true,
    force: true,
}));

私が読んだことから、要求/static/css/style.cssすると、このファイルを高速で生成してからresources/stylus/style.styl提供する必要があります。これは動作しません。/style.cssファイルが正しく生成されるようにファイルを要求した場合に機能します/public/css/style.cssが、それでも 404 が返されます。その後、/static/css/style.css物理的に存在するのでリクエストできます。

誰かがこれを修正するための手順を提案できますか? 何か不足していますか？

4

2 に答える 2

11

コンパイルが機能するには、提供元のディレクトリがソース ディレクトリにも存在する必要があります。style.stylはソースのルートにあるため、リクエストのルートにもありますGET。リソースで、名前stylusをcssに変更し、構成を次のように変更します。

app.use(stylus.middleware({
  src: __dirname + '/resources',
  dest: __dirname + '/public',
  debug: true,
  force: true
}));

するとGET /css/style.css、スタイルシートがコンパイルされます。グラフィカルに、これはコンパイルがどのように構造化されているかです:

/resources/style.styl       -->   /public/style.css
/resources/css/style.styl   -->   /public/css/style.css

すると、別の問題が出てきます。/publicと一緒に奉仕したい/static。

app.use('/static', express.static(__dirname + '/public'));

その行を次のように変更する必要があります。

app.use('/static', express.static(__dirname + '/public/static'));

これに対する解決策は、アプリケーションを次のように構成することです。

myApp
├─┬ public
│ └─┬ static
│   └── css
└─┬ resources
  └─┬ static
    └─┬ css
      └── style.styl

これでGET /static/css/style.css、スタイルシートは場所からコンパイルされます/resources/static/css/style.styl。

上記のファイル ツリーと次のコードの結果:

var express = require('express');
var stylus = require('stylus');
var app = express();

app.use('/static', express.static(__dirname + '/public/static'));
app.use(stylus.middleware({
  src: __dirname + '/resources/',
  dest: __dirname + '/public/',
  debug: true,
  force: true,
}));

最初のロード/static/css/style.cssでは 404 になりますが、2 回目のロードではスタイルシートが存在します。

于 2013-09-14T20:26:34.270 に答える
0

hexacyanide の回答に基づいて、path.joinを追加して、どの OS でも動作することを確認しました (たとえば、Windows では、正しいパス セパレータを使用しないと動作しないことがあります)。

コードは次のようになります。

var express = require('express');
var stylus = require('stylus');
var path = require('path');
var app = express();

app.use('/static', express.static(__dirname + '/public/static'));
app.use(stylus.middleware({
  src: path.join(__dirname, 'resources'),
  dest: path.join(__dirname, 'public'),
  debug: true,
  force: true,
}));

path モジュールは、OS に従って正しいパス区切り文字 (「/」または「\」) を追加する必要があります。

于 2016-08-27T19:05:02.533 に答える