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
How to use npm-installed bootstrap in express?
提问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。

