如何将购买的主题合并到 Angular 6 + Bootstrap 4 应用程序中

Question

我多年来一直是后端开发人员，但我对前端非常陌生。在过去的几周里，我一直在为一个工作项目学习 Angular 6 和 Bootstrap 4。

我有一个基本的 Angular 6 应用程序设置，并且我成功地使用了 Bootstrap 4，默认主题/样式。为了得到我目前的位置，我做了以下事情：

1. 通过创建 Angular 项目ng new project-name --style=scss –routing，所以我有一个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 主题为应用程序提供更“企业化”的外观。我们已经购买了主题，我已经下载并扩展了 .zip 文件……现在我迷路了。我不知道：

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

感觉这应该非常简单，并且应该可以在 Google、YouTube 和/或 StackOverflow 上找到大量示例。但是，我没有找到任何运气。一切似乎都是关于用一些变量来调整默认主题；不是批发更换。

任何帮助将不胜感激。

谢谢。

Answer 1

After some trial-and-error, and re-reading the docs several times, I came up with something that appears to be working for a minimal installation/usage for the Mainsonnette theme. I won't guarantee it is the correct way to do it though.

I had assumed themes would be pretty standard, and there would be a single set of steps required to incorporate any theme, but apparently I was mistaken. I now believe the first several steps below outline what will be necessary for any theme; however, the contents of what needs to be specified in each file will vary by theme. The final step is likely optional, depending on the theme.

Good luck.

1. I copied the contents of the unzipped theme's dist/html/assets/css/ folder into my Angular app's src/assets/maisonnette/css/ folder.
   • You can omit the themes sub-folder if you do not want/need them.
2. I copied the following from the unzipped theme's dist/html/assets/img/ folder into my Angular app's src/assets/maisonnette/img/ folder (you should replace these with appropriate versions of your own logo):
   • logo.png
   • logo-2x.png
   • logo-inv-2x.png
3. I copied the following from the unzipped theme's dist/html/assets/js/ folder into my Angular app's src/assets/maisonnette/js/ folder:
   • app.js
   • app.min.js
4. I copied the following from the unzipped theme's dist/html/assets/lib/ folder into my Angular app's src/assets/maisonnette/lib/ folder:
   • bootstrap/
   • jquery/
   • open-sans/
   • perfect-scrollbar/
   • raleway/
   • stroke-7/

5. I updated src/styles.scss to look like this:

   // 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. In angular.json, I updated projects...architect.build.options.scripts to look like this:

   "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. In index.html, I placed the following JavaScript at the bottom of the body tag:

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