如何在Angular 6 + Bootstrap 4应用程序中整合购买的主题

Question

我多年来一直是后端开发人员，但对于前端来说我是一个新手。在过去的几周里，我一直在学习Angular 6和Bootstrap 4，以便开展一个项目。

我有一个基本的Angular 6应用程序设置，我成功使用Bootstrap 4，默认主题/样式。为了达到目前的状态，我做了以下工作：

1. 通过ng new project-name --style=scss –routing创建了Angular项目，因此我有一个 src / styles.scss 文件
2. src / styles.scss 文件包含：
   • @import "~bootstrap/scss/bootstrap"; // Bootstrap 4 and it's defaults
3. angular.json 文件在 projects.architect.build.options 下包含以下内容： "styles": [ "src/styles.scss" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ]

已决定使用Maisonnette theme为应用提供更多“企业级”外观。我们已经购买了主题，我已经下载并扩展了.zip文件...现在我迷路了。我不确定：

1. 我需要将.zip的哪些部分复制到我的项目中
2. 在我的项目中我需要复制它们
3. 我需要更新哪些Angular 6配置文件才能使用Mainsonnette。

感觉这应该简单易行，谷歌，YouTube和/或StackOverflow应该有很多例子。但是，我没有找到任何运气。一切似乎都是用一些变量来调整默认主题;不是批发替代品。

非常感谢任何帮助。

感谢。

Answer 1

经过一些反复试验，并多次重新阅读文档后，我想出了一些似乎适用于Mainsonnette 主题的最小安装/使用的东西。我不能保证这是正确的方法。

我认为主题是非常标准的，并且需要一组步骤来合并任何主题，但显然我错了。我现在相信下面的前几个步骤概述了任何主题所需的内容;但是，每个文件中需要指定的内容因主题而异。最后一步可能是可选的，具体取决于主题。

祝你好运。

1. 我将解压缩主题的 dist / html / assets / css / 文件夹的内容复制到我的Angular应用 src / assets / maisonnette / css / 文件夹。
   • 如果您不需要/不需要，可以省略主题子文件夹。
2. 我将以下内容从解压缩主题的 dist / html / assets / img / 文件夹复制到我的Angular应用 src / assets / maisonnette / img / 文件夹（您应该使用自己徽标的相应版本替换这些文件夹）：
   • logo.png
   • 标志-2x.png
   • 标志-INV-2x.png
3. 我将以下内容从解压缩主题的 dist / html / assets / js / 文件夹复制到我的Angular应用 src / assets / maisonnette / js / 文件夹：
   • app.js
   • app.min.js
4. 我将以下内容从解压缩主题的 dist / html / assets / lib / 文件夹复制到我的Angular应用 src / assets / maisonnette / lib / 文件夹：
   • 自举/
   • 的jquery /
   • 开放的SAN /
   • 完美-滚动条/
   • raleway /
   • 冲程-7 /

5. 我更新了 src / styles.scss ，如下所示：

   // The Maisonnette theme dependencies
   @import "assets/lib/stroke-7/style.css";
   @import "assets/lib/perfect-scrollbar/css/perfect-scrollbar.min.css";
   
   // The Maisonnette theme itself (includes BS4 CSS)
   @import "assets/css/app.min.css";
   

6. 在 angular.json 中，我更新了项目...... architect.build.options.scripts ，如下所示：

   "scripts": [
     "src/assets/maisonette/lib/jquery/jquery.min.js",
     "src/assets/maisonette/lib/perfect-scrollbar/js/perfect-scrollbar.min.js",
     "src/assets/maisonette/lib/bootstrap/dist/js/bootstrap.bundle.min.js",
     "src/assets/maisonette/js/app.min.js"
   ]
   

7. 在 index.html 中，我将以下JavaScript放在 body 标记的底部：

   <!-- Initialize Maisonnette theme -->
   <script type="text/javascript">
     $(document).ready(function(){
       //initialize the javascript
       App.init();
     });
   </script>