Angular UIKit npmのインストール

Question

angle2 cliプロジェクトの中にUIKit npmパッケージをインストールすると、どのように使用できますか？私もインストールした入力（@ types/uikit）がありますが、JS/CSSクラスを使用するために、パッケージをコントローラにインポートする方法がわかりません。

Answer 1

私はangi-cliベースのプロジェクトで私の仕事をしています。私自身のテーマを作る私にとって重要だった、これは私がそれをやった方法です：

まずインストール/ jQueryとのUIKitに依存関係を追加します。

npm install jquery --save 
npm install uikit --save 

Then edit .angular-cli.json file and add the scripts: 

... 
"scripts": [ 
     "../node_modules/jquery/dist/jquery.min.js", 
     "../node_modules/uikit/dist/js/uikit.min.js", 
     "../node_modules/uikit/dist/js/uikit-icons.min.js" 
     ], 
... 
Now you can use UIKit wherever 

import {Component} from "@angular/core"; 
declare var UIkit: any; 

@Component({ 
    template: `<div (click)="showAlert()">alert</div>` 
}) 
export class OwnerComponent { 
    showAlert(): void { 
    UIkit.modal.alert('UIkit alert!'); 
    } 
} 

offtopic：私は設定する方法について説明し、次のステップでSASS/SCSSを使用するためのプロジェクトは、あなたがstyles.scssにStyles.cssを名前を変更しUIKitのテーマ

を所有するために（ファイル自体の名前を変更することを忘れないでください！）

... 
"styles": [ 
     "styles.scss" 
     ], 
... 

次にあなたがすることができますstyle.scssを編集してUIKitをコンパイルして独自のテーマを作成する

// 1. Your custom variables and variable overwrites. 
$global-link-color: #DA7D02; 

// 2. Import default variables and available mixins. 
@import "../node_modules/uikit/src/scss/variables-theme.scss"; 
@import "../node_modules/uikit/src/scss/mixins-theme.scss"; 

// 3. Your custom mixin overwrites. 
@mixin hook-card() { color: #000; } 

// 4. Import UIkit. 
@import "../node_modules/uikit/src/scss/uikit-theme.scss";