将npm node_modules的CSS导入Play Framework 2.4应用 [英] Import npm node_modules' css into Play Framework 2.4 app

问题描述

我正在尝试使用几种方法在我的Play框架应用中使用Browserify，其中一种方法是使用npm作为程序包管理器.安装了一些模块，并且典型的node_modules文件夹出现在项目的根目录.

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.

使用Browserify和Gulp，我能够从此类模块中获取" JavaScript并使用它(例如，以Bootstrap为例).

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

但是，在加载CSS(例如用于Bootstrap)时，我尝试了其他所有方法都无法正常工作.

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

首先，我试图使其在纯HTML/css项目中运行，并且在安装npm模块之后，能够用简单的一行导入css:

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">

在play应用程序的上下文中，我将继续在该CSS上获取404.这是我尝试过的一小部分内容:

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:

• 简单包含CSS外部样式表(使用../../退出应用程序/视图)
• @import进入我的本地CSS之一(也使用../../)
• 将node_modules文件夹复制到目标文件夹中WebJars旁边的某个位置.我尝试这样做的原因是来自播放2.3迁移的以下摘录.此段还使我尝试Webjars.找到我复制到目标中的npm软件包.

• 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.

通过在项目根目录中声明package.json文件，可以将

npm与WebJars一起使用.来自npm软件包的资产被提取到与WebJars相同的lib文件夹中，因此从代码角度来看，不必担心资产是来自WebJar还是来自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_module CSS复制到资产中.这是否消除了使用软件包管理器(如NPM)的意义?
• 我还试图在我的JavaScript中要求(引导/路径到CSS).
• 查看过browserify-css和npm-css模块，但是@import和@require(css-file)也将失败.

如何在Play上下文中将node_modules CSS引入我的应用程序? 推荐哪种方法使它以干净的方式工作?

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?

谢谢

推荐答案

添加到您的build.sbt中:

add in your 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应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！