How to add a CSS framework in Angular 2 || 4
After learning a lot from a book I recently bought. I wanted to know how to add in a CSS bootstrapping framework like bootstrap and semantic-ui into my projects globally. So here it goes.
- Create new application || work from the one you have.
ng new my-app
2. Change to your application directory.
cd my-app
3. Install your favourite css framework.{I usually work with bootstrap or Semantic-UI}.
npm install bootstrap@3 jquery --save
or
npm install semantic-ui --save
4.Open your .angular-cli.json file.
5. Add in you css file path in the styles array. eg.
"styles": ['/node_modules/semantic-ui/dist/semantic.min.css']
6. Add in your jquery script file path to your scripts array and your css framework script file path with that.eg.
"scripts": ["../node_modules/jquery/dist/jquery.min.js","../node_modules/semantic-ui/dist/semantic.min.js"]
7. Enjoy your coding experience.
Side note. I always find that the order in which you add your scripts and styles are important.