How to add UIKit to Angular

How to add UIKit to Angular

code
Colin Stodd
Angular,UIKIT,Tutorial
19 Feb 2019 (Published)
01 Apr 2020 (Updated)

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 .

If you’re using CSS:

  1. From the root of your project you need to install jQuery and UIKit:

     npm install jquery uikit --S
    
  2. 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/jquery/dist/jquery.min.js",
             "./node_modules/uikit/dist/js/uikit.min.js",
             "./node_modules/uikit/dist/js/uikit-icons.min.js"
         ]
    
  3. Since we updated angular.json you’ll have to restart your server.


If you’re using SCSS or SASS:

  1. From the root of your project you need to install jQuery and UIKit:

     npm install jquery uikit --S
    
  2. 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/jquery/dist/jquery.min.js",
         "./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.
  3. Create a styles directory/folder in /src. So it should be src/styles.

  4. 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.

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

     /* Custom Variables */
     @import 'variables';
     @import 'mixins';
     @import 'custom';
     /* UIKit */
     @import "variables-theme.scss";
     @import "mixins-theme.scss";
     @import "uikit-theme.scss";
    
  6. 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';
    
  7. Since we updated angular.json you’ll have to restart your server.