Angular UIKit npm Installation

Question

Wie kann das UIKit npm Paket in einem angular2 cli Projekt installiert werden? Es gibt Typisierungen (@ types/uikit), die ich auch installiert habe, aber ich habe keine Ahnung, wie ich das Paket in einen Controller importieren soll, um seine JS/CSS-Klassen zu verwenden.

Answer 1

Es funktioniert für mich auf einem eckigen-cli-basierten Projekt. Es war mir wichtig, mein eigenes Thema zu machen und das ist, wie ich es tat:

Zuerst installieren/add Abhängigkeit jquery und 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: im nächsten Schritt, den ich erklären, wie das konfigurieren Projekt sass/SCSS verwenden Sie UIKit Thema

benennen Sie die styles.css zu styles.scss (nicht umbenennen vergessen die Datei selbst!)

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

Dann können Sie besitzen machen editiere style.scss, um UIKit zu kompilieren und dein eigenes Thema zu erstellen

// 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";