2017-08-03 35 views
0

我想添加一個引導程序加載項,即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文件夾中添加自舉切換(或者類似的庫)應用程序?

+0

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

+0

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

+0

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

回答

1

它實際上比這兩個建議都簡單得多。您只需提及​​中所需的資源即可。這包括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或任何需要的東西。

0

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

在json文件中,在apps內,您可以添加要從node_modules文件夾加載的stylesscripts

例如,在我的項目中添加我已經添加了font-awesome.scssbootstrap.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" 
     ], 

    ], 
+0

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