How to add UIKit to Angular

I heard about UIKit from a friend and really liked it! If you do a little digging on their website you’ll see that they have a NPM package.
This post shows you how to install UIKit in Angular using either CSS or SCSS/SASS .

Thanks to a commenter for pointing out that jQuery is no longer needed as a dependency, so now all you need is the UIKit package.

If you’re using CSS:

From the root of your project you need to install UIKit:
```
 npm install uikit --S
```

Update your angular.json file with the same code snippet below in two places: Underneath "build" and "test":

 "styles": [
         "src/styles.css",
         "./node_modules/uikit/dist/css/uikit.min.css",
         "./node_modules/uikit/dist/css/uikit-core.min.css"
     ],
     "scripts": [
         "./node_modules/uikit/dist/js/uikit.min.js",
         "./node_modules/uikit/dist/js/uikit-icons.min.js"
     ]

Since we updated angular.json you’ll have to restart your server.

If you’re using SCSS or SASS:

From the root of your project you need to install UIKit:
```
 npm install uikit --S
```

Update your angular.json file with the same code snippet below in two places. Underneath "build" and "test":

 "styles": [
     "src/styles/styles.scss"
   ],
   // See blurb (link) below regarding this (And delete this comment).
   "stylePreprocessorOptions": {
     "includePaths": [
       "src/styles",
       "./node_modules/uikit/src/scss"
     ]
   },
   "scripts": [
     "./node_modules/uikit/dist/js/uikit.min.js",
     "./node_modules/uikit/dist/js/uikit-icons.min.js"
   ]

To read more about stylePreprocessorOptions go to Angular/CLI README . It's a quick (3 min) read and definitely a good thing to be aware of if you're working with SASS, LESS, etc. in Angular.

Create a styles directory/folder in /src. So it should be src/styles.

Now move your styles.scss file into that directory and create your variables, mixins and custom files to that src/styles directory using the following naming convention: _variables.scss, _mixins.scss and _custom.scss.

 src
 ├── app
 │   ├── app-routing.module.ts
 │   ├── app.component.html
 │   ├── app.component.scss
 │   ├── app.component.spec.ts
 │   ├── app.component.ts
 │   ├── app.module.ts
 │   └── users
 ├── assets
 ├── environments
 │   ├── environment.prod.ts
 │   └── environment.ts
 ├── favicon.ico
 ├── index.html
 ├── main.ts
 ├── polyfills.ts
 ├── styles
 │   ├── _custom.scss /* Add files here but they should have the "_" pre-pended like `_custom.scss`, (shown above) other than `styles.scss`.  */
 │   ├── _mixins.scss /* Your editor and the lang strips these but I'm not entire sure why they are needed, but that's what I was taught. */
 │   ├── styles.scss
 │   └── _variables.scss  /* Add files here but they should have the "_" pre-pended like `_custom.scss`, (shown above) other than `styles.scss`.  */
 └── test.ts

Now open your styles.scss file and import UIKit and your custom/mixin/variable files:

 /* Custom SCSS/SASS Files */
 @import 'variables';
 @import 'mixins';
 @import 'custom';
 /* UIKit */
 @import "variables-theme.scss";
 @import "mixins-theme.scss";
 @import "uikit-theme.scss";

To use your variables in other components, you’ll have to import them into every component-name.component.scss file like so. But because we added the src/styles and the "./node_modules/uikit/src/scss" to "stylePreprocessorOptions" in our angular.json file, we can leave off the path in our style files because they are compiled globally (read the blurb above) which makes things much cleaner:
```
 /* component-name.component.scss */
 @import 'variables';
```
Since we updated angular.json you’ll have to restart your server.

Colin Stodd