0

ASP MVC の世界よりも面白くて軽量なので、Express やその他のさまざまなノード関連のフレームワークに慣れてきました。最初にやろうとしているのは、SASS ファイルを自動的に CSS ファイルにコンパイルすることです。 .

私はそれにいくつかの方法を取り入れてインストールnode-sassし、いくつかのチュートリアルに従いましたが、必要な結果が得られません. まず、これが私のディレクトリ構造です。

app.js
    static/
        stylesheets/
        images/
        js/
    sass/
        index.sass
    views/
        index.jade

したがって、私の計画はかなり単純です。ブラウザーでアクセスしたときに、レンダリングしviews/index.jadeたい- 明らかに、これはコンパイル時には存在しませんが、対応するファイルが.index.jadestatic/stylesheets/index.cssindex.scsssass

私の現在の設定は、/css/index.cssを参照すること__dirname/static/stylesheetsです。したがって、私の翡翠ビュー内には、次のブロックがあります。

block head
    link(href='/css/index.css', rel='stylesheet')

意図は、このリンクがコンパイルされた sass ファイルを参照することです。以下は、sass のコンパイルと静的コンテンツの提供に関する app.js の部分です。

// Enable SASS compilation
app.use(sass.middleware({
    src: __dirname + '/sass',
    dest: __dirname + '/static/stylesheets',
    debug: true,
    outputStyle: 'compressed'
}));

// Add static content
app.use('/js', express.static(__dirname + '/static/js'));
app.use('/img', express.static(__dirname + '/static/img'));
app.use('/css', express.static(__dirname + '/static/stylesheets'));

私の問題は、実際に起こっていることは、SASS が css をうまくコンパイルしているように見えますが、上記で使用したルート/css/のために、すべてをフォルダー (存在しない) に追加していることです。/cssおそらく、デバッグ出力の方が理にかなっています。

 source : E:\project\sass\css\index.scss
 dest : E:\project\static\stylesheets\css\index.css
 read : E:\project\static\stylesheets\css\index.css

明らかに、これは意図したものではなく、ブラウザーが要求していると認識しているため 404ing になりcss/index.cssますが、SASS ファイルは実質的にcss/css/index.css.

ここで何をすべきですか？私は明らかな間違いを犯していると思いますが、ノード/エクスプレスを初めて使用するため、それを見ることができません。

4

1 に答える 1