如何在使用Bootstrap 3的Angularjs应用中正确导入Bootstrap 4

时间:2018-07-26 09:08:04

标签: javascript angularjs twitter-bootstrap-3 bootstrap-4

我正在尝试迁移使用AngularJS 1.6.x和当前Bootstrap 3的App。我安装了Bootstrap 4,Popper.js和JQuery,并对Bootstrap 3的类进行了很多重写4。

问题是,网格似乎没有导入任何地方,元素无处不在。我的意思是说,我的应用需要像在Bootstrap 3中那样做更多工作,但不应该那么坏。

我想要一个清楚的解释,说明如何在AngularJS应用程序中正确导入Bootstrap 4。更具体地说,如果我需要以其他方式导入它,或者需要其他npm包等,则需要在webpack.config.js中完成什么工作。

男人和女孩,我知道这是一个模糊的问题,但对于AngularJS,网上没有任何内容。因此,如果您知道答案,请回答我的问题。如果您不举报,因为许多人对此都有类似的问题,但没人回答。

以下是一些代码:

在index.js文件中:

import 'bootstrap/dist/css/bootstrap.min.css';

在app.js文件中:

require('bootstrap');

在package.json文件中:

"bootstrap": "^4.1.3",

再次使用大多数类,并且webpack.config.js似乎配置正确,但是我不确定。因此,如果您可以重定向我进行指导,我们将不胜感激。再次不要报告问题。

更新 我的文件结构相当复杂。有2个应用程序,登录和核心。

root
 |--node_modules
 |--src
 |   |--auth
 |   |   |--login
 |   |   |    |--assets
 |   |   |    |    |--html
 |   |   |    |    |   |--index.html
 |   |   |    |    |--scss
 |   |   |    |    |   |--styles.scss
 |   |   |    |    |--index.js
 |   |--app
 |   |   |--core
 |   |   |   |--assets
 |   |   |   |    |--html
 |   |   |   |    |   |--index.html
 |   |   |   |    |--scss
 |   |   |   |    |   |--styles.scss
 |   |   |   |    |--index.js
 |   |--app.js
 |   |--app.main.js
 |   |--app.menu.js
 |   |--app.routes.js
 |   |--index.js
 |--package.json
 |--webpack-base.config.js
 |--webpack.config.js  

这是文件结构的一小部分示例。文件更多,但是在此问题范围内并不重要。

此外,我必须告诉您,我完全重写了我们的类以使用Bootstrap 4类。事情是样式根本没有引起人们的关注。甚至CDN都不起作用。

我对此完全不知所措。它应该开箱即用。至于错误,我没有。该程序可以完美编译。它虽然坏了。不应用css,scss样式或引导覆盖。希望我回答了你的问题。

作为旁注,我遵循了Bootstrap网站here上的Webpack指南。

0 个答案:

没有答案