将 npm node_modules' css 导入 Play Framework 2.4 应用

Question

我正在尝试使用 Browserify 和我的游戏框架应用程序的几种方法，其中之一是使用 npm 作为包管理器。安装了几个模块，典型的 node_modules 文件夹出现在项目的根目录下。

使用 Browserify 和 Gulp，我能够从这些模块中 'require' Javascript 并使用它（例如 Bootstrap）。

但是，加载 CSS（例如对于 Bootstrap）我尝试了不同的方法 none，其中的方法可行。

首先，我试图让它在一个普通的 HTML/css 项目中工作，并且在安装 npm 模块之后，能够使用简单的一行导入 css：

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

在 play 应用程序的上下文中，我会不断收到 404 CSS。这是我尝试过的一小部分：

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

npm can be used as well as WebJars by declaring a package.json file in the root of your project. Assets from npm packages are extracted into the same lib folder as WebJars so that, from a code perspective, there is no concern whether the asset is sourced from a WebJar or from an npm package.

网上看，好像很多人真的把他们的npm_modulecss复制到assets里面。这不会消除使用 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")" />

将 npm node_modules' css 导入 Play Framework 2.4 应用

Import npm node_modules' css into Play Framework 2.4 app

playframework

npm

playframework-2.0

browserify