我正在尝试使用几种方法在我的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.
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
发布评论