将npm node_modules的css导入Play Framework 2.4应用程序

Question

我正在尝试使用Browserify和我的Play框架应用程序的几种方法，其中之一是使用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">

在Play应用程序的上下文中，我会继续在CSS上获得404。这是我尝试过的一小部分内容：

• 简单包含CSS外部样式表（使用../../来退出app / views）
• @import在我的一个本地CSS中（也使用../../)
• 将node_modules文件夹复制到目标文件夹中，即WebJars旁边的某个位置。我试过的原因是以下Play 2.3 Migration的摘录。这一段也让我尝试使用Webjars.locate我复制到目标的npm包。

  

通过在项目的根目录中声明package.json文件，可以使用npm和WebJars。来自npm包的资源被提取到与WebJars相同的lib文件夹中，因此从代码的角度来看，不关心资产是来自WebJar还是来自npm包。

• 在线阅读，似乎很多人实际上将他们的npm_module css复制到资产中。这不会消除使用包管理器（例如NPM）的意义吗？
• 我还试图在我的javascript中要求（bootstrap / path-to-css）。
• 查看了browserify-css和npm-css模块，但是@import和@require（css-file）也会失败。

如何在Play的上下文中将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")" />