각도 UIKit npm 설치

Question

각도 2 cli 프로젝트 안에 UIKit npm 패키지를 설치할 때 어떻게 사용할 수 있습니까? 입력 한 (@ 유형/uikit) 또한 설치 한 있지만 JS/CSS 클래스를 사용하려면 컨트롤러로 패키지를 가져 오는 방법을 잘 모르겠습니다.

Answer 1

각도 CLI 기반 프로젝트에서 저에게 효과적입니다. 내 자신의 테마를 만들어 나에게 중요하고 있었고, 난 그것을 어떻게이 있습니다 :

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!'); 
    } 
} 

논외 :

먼저 JQuery와 및 uikit에 종속성을 추가/설치 다음 단계에서 나는를 구성하는 방법에 대해 설명합니다 말대꾸/SCS들을 사용하는 프로젝트는 당신이 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";