twitter-bootstrap 如何在 express 中使用 npm 安装的引导程序?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/30473993/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 22:43:58  来源:igfitidea点击:

How to use npm-installed bootstrap in express?

node.jstwitter-bootstrap

提问by Keyu Lin

I 'm a beginner of Node.js development, Now I try to use bootstrap framework in my first Express web app.

我是 Node.js 开发的初学者,现在我尝试在我的第一个 Express Web 应用程序中使用引导程序框架。

I use

我用

npm install bootstrap

to download the files,and it seems that npm puts them in my node_modules folder.

下载文件,似乎 npm 将它们放在我的 node_modules 文件夹中。

My question is how can I refer to the bootstrap files in my views in express?

我的问题是如何在 express 视图中引用引导程序文件?

I know a typical way is copying the bootstrap file into the public folder. So my html files can find them. But I don't think this is a good idea.

我知道一种典型的方法是将引导程序文件复制到公共文件夹中。所以我的 html 文件可以找到它们。但我不认为这是一个好主意。

Thank you.

谢谢你。

采纳答案by mfrachet

You have to reference it in the <script>and <link>tags in the header or at the bottom of your main script.

您必须在标题中或主脚本底部的<script><link>标签中引用它。

If you're using express, you're probably using templating. To use it in your header part or in your main template (depending on how you've managed your views) like :

如果您使用的是 express,那么您可能正在使用模板。要在标题部分或主模板中使用它(取决于您管理视图的方式),例如:

<script language="javascript" src="node_modules/bootstrap/.../bootstrap.min.js"></script>

and

<link rel="stylesheet" href="node_modules/bootstrap/.../bootstrap.min.css"/>

This works only if you didn't moved your files with a gulp or a grunt task

这仅在您没有使用 gulp 或 grunt 任务移动文件时才有效

回答by Victor Behar

You need to use in your server.js:

你需要在你的 server.js 中使用:

app.use(express.static(__dirname + '/node_modules/bootstrap/dist'));

to define a static resourse and then use:

定义一个静态资源,然后使用:

<script language="javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css"/>

回答by Akarsh SEGGEMU

I found a similar question. In which the solution is explained better by @augusto-goncalves. His solution works for me. It is similar to the solution of @victor-behar but more elaborated and clears confusion.

我发现了一个类似的问题。@augusto-goncalves 在其中更好地解释了解决方案。他的解决方案对我有用。它类似于@victor-behar 的解决方案,但更详细并消除了混乱。

回答by morpheus

There's also a way to transpile scss in express using node sass middleware, for example https://github.com/sass/node-sass-middleware.

还有一种使用 node sass 中间件在 express 中转译 scss 的方法,例如https://github.com/sass/node-sass-middleware

That way you can override bootstrap scss. You can do the same for JS with webpack: transpile client-side js and then include the bundle.js in your frontend.

这样你就可以覆盖 bootstrap scss。你可以用 webpack 对 JS 做同样的事情:transpile client-side js,然后在你的前端包含 bundle.js。