2016-04-07 12 views
2

Oyunum çerçeve uygulamam ile Browserify'i kullanmam için birkaç yaklaşım deniyorum, bunlardan biri npm'yi paket yöneticisi olarak kullanmak. Birkaç modül yüklenir ve tipik node_modules klasörü projenin kökünde görünür.Import npm node_modules 'css'i Play Framework 2.4 uygulamasına getirin

Browserify ve Gulp'i kullanarak, bu modüllerdeki Javascript'i 'kullanabiliyordum' ve kullanabildim (örneğin Bootstrap'i al). Bununla birlikte, CSS (ör. Bootstrap için) yüklerken, hiçbiri işe yaramayacak farklı şeyler denedim. Oyunun bağlamda

<link type="text/css" rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"> 

:

Birincisi, ben bir düz HTML/css projesinde çalışmak ve npm modülleri yükledikten sonra yapmaya çalıştı, basit bir çizgi ile css içe başardı App, bu CSS üzerinde bir 404 almaya devam ediyorum. İşte teşebbüs şeylerin küçük bir liste: CSS, harici stil arasında

  • basit içerme da (benim yerel CSS birinin içine
  • @import (/ görünümler app çıkmak ../../ kullanarak) ../../)
  • node_modules klasörünü, WebJars'ın yanındaki bir yere hedef klasöre kopyalayın. Denedim nedeni Play 2.3 Migration aşağıdaki alıntıdır. Bu paragraf aynı zamanda beni hedefe kopyaladığım npm paketini Webjars.locate denememi sağladı.

npm projenizin kök bir package.json dosyasını bildirerek WebJars yanı sıra kullanılabilir. Npm paketlerindeki varlıklar WebJars ile aynı lib klasörüne çıkarılır, böylece bir kod perspektifinden, varlığın bir WebJar'dan veya bir npm paketinden kaynaklanıp kaynaklanmadığı konusunda bir endişe yoktur. Online Okuma

  • , birçok insan aslında varlık içine kendi npm_module css kopya görünüyor. Bu, NPM gibi paket yöneticisini kullanma noktasını kaldırmaz mı?
  • Ayrıca javascript'imde (bootstrap/path-to-css) gerektirmeye çalıştım.
  • browserify-css ve npm-css modüllerine bakıldı, ancak @import ve @require (css dosyası) da başarısız olur.

node_modules css'i Play bağlamında uygulamamın içine nasıl getirebilirim? Bunu temiz bir şekilde çalışması için hangi yöntem önerilir?

Teşekkür

cevap

2

sizin build.sbt içinde ekleyin:

unmanagedResourceDirectories in Assets += baseDirectory.value/"node_modules" 

sizin html

<link type="text.css" rel="stylesheet" href="@routes.Assets.versioned("bootstrap/dist/css/bootstrap.css")" /> 
+0

sayesinde ekleyebilir, bu prob çözüldü! – Khorkhe

+0

@Khorkhe, Düzenleme sırasında gönderiye bir düzenleme bildirimi eklemek kötü bir uygulama olarak kabul edilir, bu yüzden önerilen değişiklikten kaldırdım. [Yığın Taşması, yayınların revizyon geçmişini kaydeder] (http://stackoverflow.com/posts/41496998/revisions), bu nedenle, orada yaptığınız değişikliklerin bir izi var. Bu, düzenlemelerinizi belgelemenin tercih edilen yoludur. – HPierce

+0

Kulağa hoş geliyor.SO gerçekten sadece 6 karakterden uzun bir değişiklik istedi ve tek başına yazım hatası yapmadı :) – Khorkhe

İlgili konular