Угловая установка UIKit npm

Question

При установке пакета UIKit npm внутри проекта angular2 cli, как его можно использовать? Есть типизации (@ types/uikit), которые я также установил, но я понятия не имею, как импортировать пакет в контроллер для использования его классов JS/CSS.

Answer 1

Это работает для меня в проекте, основанном на угловом кли. Это было важно для меня сделать свою собственную тему и это, как я сделал это:

Сначала установите/добавить зависимость в 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!'); 
    } 
} 

оффтоп: в следующем шаге я объясню, как настроить проект по использованию Sass/SCSS, чтобы у вас есть UIKit тему

переименуйте styles.css в styles.scss (не забудьте переименовать сам файл!)

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