2017-11-16 8 views
1

私はnodeJS、特にフレームワークSailsを扱う際の初心者です。サービングスタイルシートとセイル付JS

私は自分の研究を行ったところ、帆で「アセット」フォルダの下にCSSファイルを置き、URLで直接呼び出す必要があることを発見しました。 custom.cssというファイルを "assets/foo"というフォルダに置くと、 "localhost:1337/foo/custom.css"というURLからアクセスできるはずです。

問題は私のローカルサーバーが404エラーをスローしてファイルを見つけることができないことですが、不思議なことに、アプリケーションをHerokuにデプロイすると完全に動作し、CSSファイルにアクセスできます。

なぜローカルでは機能しないのですか?

+0

サーバーはポート1337で動作していますか? custom.css以外のルートにアクセスできますか?アプリケーションログに何が起こっているかのヒントを確認できますか? –

+1

変更後にアプリを再起動しましたか?アプリの実行中に何らかの変更が有効になりますが、再起動が必要なものもあれば、アプリがdevモードで実行されている場合には少し時間がかかります。あなたのアプリを再起動し、まだ404を取得してみてください。 – arbuthnott

答えて

0

帆にようこそ! CSSは、assets/stylesフォルダに入れると自動的に配信されます。あなたのJSはassets/jsフォルダにもあるはずです。この方法で、localhost:1337/assets/js/myjs.jsのようにアクセスできます。

レイアウトでどこにでも配信したくない場合は、<link rel="stylesheet" href="/styles/myawesomestyle.css">または<script src="/js/mypowerfuljs.js"></script>のようにタグを付けてください。 アセットのすべてが公に利用可能になることを覚えておいてください。 ドキュメントHEREを読むことを本当にお勧めします。

+0

ありがとうございます。今、私は分かる。しかし、私はスタイルフォルダ(自動インポート)でCSSファイルの多くを置く場合、アプリケーションの読み込みを遅らせることはありません?? –

+0

セイルズは複数の.CSSと.JSをプロダクションモードで縮小して処理します。しかし、あなたが 'pipeline.js'設定ファイルで提供しているものだけです。ですから、 'bootstrap.min.css'、' fa.css'、 'any.css'をパイプラインに持っていれば、あなたのビューに提供される単一の' production.css'に変換されます。したがって、最悪のシナリオでは、 'production.js'、' production.css'、 'specscriptforthisview.js'、' specificstyleforthisview.css'の4つのファイルがロードされます。 – paulogdm

関連する問題