How to include UIKit in your Angular Project with SASS ?

Hello everyone! A young guy trying to be MEAN Stack here..

In this post I will talk about how to include UIKit in your angular project. You know , Angular Material doesn’t have enough components required to build a complete website, either you use bootstrap or make your own components. I also had a hard time searching for a better frontend framework because you know lazy developer 😛 Have a little logic but no creativity !!

NOTE : I am talking about angular-cli project not a compiled version from any CDN.

I hope you already have a clear understanding about creating a Angular Project. If not , Click here

Navigate your terminal into the project directory.
First, we need to install the main dependency of any JS/CSS framework for frontend i.e. JQuery

npm install jquery uikit --save

Now , We need to update our JSON file of Angular Project to include our uikit files while compiling the source files. Open angular.json ( @Angular 6 ) and update it as below.


"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 include classes and javascript functions used with the framework as described in UIKit docs.

If you prefer to use SCSS ( if you haven’t already chosen it in the initialization step )..

Change these two properties as follows..


"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},


And also the style.css needs to be renamed and updated.
"styles": [
"src/styles.scss"
],


Be sure to import UIKIT styling in the styles.scss file..


@import "../node_modules/uikit/src/scss/variables.scss";
@import "../node_modules/uikit/src/scss/mixins-theme.scss";
@import "../node_modules/uikit/src/scss/uikit-theme.scss";


Well , Do what you wish ! Be sure to comment if you got a better frontend 😉