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 aboutstylePreprocessorOptions
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 besrc/styles
. - Now move your
styles.scss
file into that directory and create your variables, mixins and custom files to thatsrc/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 thesrc/styles
and the"./node_modules/uikit/src/scss"
to"stylePreprocessorOptions"
in ourangular.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.