Angular UIKit npm 安装答案

【问题标题】：Angular UIKit npm installationAngular UIKit npm 安装
【发布时间】：2017-07-14 11:17:19
【问题描述】：

在 angular2 cli 项目中安装 UIKit npm 包时，如何使用它？我还安装了一些类型（@types/uikit），但我不知道如何将包导入控制器以使用其 JS/CSS 类。

【问题讨论】：

【解决方案1】：

它在基于 angular-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 来制作您自己的 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";

【讨论】：