將npm node_modules的css導入到Play Framework 2.4應用程序

Question

我嘗試了幾種使用Browserify和我的play framework應用程序的方法，其中之一就是使用npm作爲包管理器。安裝了幾個模塊，典型的node_modules文件夾出現在項目的根目錄下。

使用Browserify和Gulp，我能夠從這些模塊'需要'Javascript並使用它（以Bootstrap爲例）。

然而，加載CSS（例如對於Bootstrap）我嘗試了不同的東西，其中沒有任何工作。

首先，我試圖使它在一個普通的HTML/CSS項目工作，並安裝NPM模塊後，能夠用簡單的線條導入CSS：

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

在劇中的情境應用程序，我會繼續在該CSS上獲得404。下面是我嘗試的東西小清單：

• 簡單列入CSS外部樣式表（使用../../脫身應用程序/視圖）在我的本地CSS的一個
• @import（也使用../../）
• 將node_modules文件夾複製到目標文件夾中，位於WebJars旁邊。我試過的原因是以下摘錄自Play 2.3 Migration。這段也讓我嘗試了Webjars.locate我複製到目標的npm包。

NPM可以通過在你的項目的根聲明的package.json文件中使用以及WebJars。 npm包中的資源被提取到與WebJars相同的lib文件夾中，因此，從代碼的角度來看，不管資產是來自WebJar還是來自npm包。

• 在線閱讀，似乎很多人其實他們npm_module CSS複製到資產。這是否沒有消除使用包管理器（如NPM）的要點？
• 我也試圖要求（引導/路徑到CSS）在我的JavaScript。
• 看着browserify-css和npm-css模塊，但是@import和@require（css-file）也會失敗。

如何在播放的上下文中將node_modules css帶入我的應用程序？ 哪種方法是推薦的做法，以使其以乾淨的方式工作？

感謝

Answer 1

添加在您的build.sbt：

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

在你的HTML添加

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