向JHipster（Angular 2+）添加引導程序切換

我想添加一個引導程序加載項，即Bootstrap Toggle到JHipster項目。該項目包括一個.css和.js文件，並要求jQuery。向JHipster（Angular 2+）添加引導程序切換

簡單地添加到index.html工作正常，但感覺哈克。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"> 
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

我想利用紗線和webpack。我嘗試添加一個vendor.css到其中進口切換css文件內容的文件夾，但似乎並沒有做任何事情：

@import 'node_modules/boostrap-toggle/css/bootstrap-toggle.css';

我怎樣才能從我的node_modules文件夾中添加自舉切換（或者類似的庫）應用程序？

來源

2017-08-03 hschne

@RahulSingh我認爲你鏈接到了錯誤的問題。 – hschne

這可能是https://stackoverflow.com/q/45339209/2708210 –

重複我很抱歉。這個問題的答案解釋瞭如何使用第三方css或js –

它實際上比這兩個建議都簡單得多。您只需提及中所需的資源即可。這包括JavaScript。

import '../content/scss/vendor.scss'; 
import '../content/css/vendor.css'; 
import 'path to js'

的vendor.css類似於vendor.scss，但進口路徑是一個有點不同。據我所知，Tilde表示node_modules文件夾。

@import "~github-markdown-css/github-markdown.css";

，這是所有。沒有插手.angular-cli.json或任何需要的東西。

來源

2017-08-04 16:59:26 hschne

在角度2+中，如果使用@angular/cli創建項目，則有.angular-cli.json文件。

在json文件中，在apps內，您可以添加要從node_modules文件夾加載的styles和scripts。

例如，在我的項目中添加我已經添加了font-awesome.scss，bootstrap.scss以及類似jquery tether and bootstrap這樣的腳本。

"apps": [ 
    { 

     "styles": [ 
     "../node_modules/font-awesome/scss/font-awesome.scss", 
     "../node_modules/bootstrap/scss/bootstrap.scss", 
     "styles.scss" 
     ], 

     "scripts": [ 
     "../node_modules/jquery/dist/jquery.js", 
     "../node_modules/tether/dist/js/tether.js", 
     "../node_modules/bootstrap/dist/js/bootstrap.js" 
     ], 

    ],

來源

2017-08-03 19:25:06

使用Angular CLI可能是一個選項，但JHipster項目默認不包含'.angular-cli.json'。我寧願不這樣做，並與模板已經提供的東西一起工作。 – hschne

向JHipster（Angular 2+）添加引導程序切換

回答

相關問題