Import npm node_modules' css into Play Framework 2.4 app

Question

I am trying several approaches to using Browserify with my play framework app, one of them is to use npm as package manager. A few modules are installed, and the typical node_modules folder appears at the root of the project.

Using Browserify and Gulp, I was able to 'require' the Javascript from such modules and use it (take Bootstrap, for example).

However, loading the CSS (e.g. for Bootstrap) I tried different things none of which would work.

First, I tried to make it work in a plain HTML/css project, and after installing the npm modules, was able to import css with a simple line:

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

In the context of the play app, I would keep getting a 404 on that CSS. Here's a small list of things I attempted:

• simple inclusion of CSS external stylesheets (using ../../ to get out of app/views)
• @import inside one of my local CSS (also using ../../)
• copy node_modules folder into the target folder, somewhere next to the WebJars. The reason I tried that is the following excerpt from Play 2.3 Migration. This paragraph also made me try to Webjars.locate the npm package I copied into target.

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.

• Reading online, it seems many people actually copy their npm_module css into assets. Doesn't that remove the point of using package manager such as NPM?
• I also attempted to require(bootstrap/path-to-css) in my javascript.
• Looked into browserify-css and npm-css modules, but @import and @require(css-file) would also fail.

How to bring the node_modules css into my app in the context of Play? Which method would be a recommended practices to get this to work in a clean way?

Thanks

Answer 1

add in your build.sbt:

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

add in your html

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