Angular UIKit npm installation

Question

When installing the UIKit npm package inside an angular2 cli project, how can it then be used? There are typings (@types/uikit) that I also installed, but I have no idea how to import the package into a controller to use its JS / CSS classes.

Answer 1

It's working for me on an angular-cli based project. It was important to me make my own theme and this is how I did it:

First install / add dependency to jquery and 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: in the next step I explain how to configure the project to use sass / scss to make you own uikit theme

Rename the styles.css to styles.scss (don't forget to rename the file itself!)

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

Then you can edit style.scss to compile UIKit and make your own theme

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