问题
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
回答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")" />
来源：https://stackoverflow.com/questions/36475629/import-npm-node-modules-css-into-play-framework-2-4-app