Twitter Bootstrap Question posted in

Angular v8 add 3rd party styles to component-Twitter bootstrap

My angular component looks like:

@Component({
    selector: 'home',
    templateUrl: './home.component.html',
    styleUrls: ['https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css',
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css']
})

And at the step of compilation via angular-cli I have errors:

Module not found: Error: Can't resolve './https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css'

Module not found: Error: Can't resolve './https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'

How can I resolve my issue?

Tags:

3

Answers


  1. 0

    Only import your component .scss .css file like that 

    @import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";

    If you creat a files for each import then import like that.

      @Component...
  styleUrls: ['./hello.component.scss',
          '../../assets/bs4.css',]

    It worked in this link https://stackblitz.com/edit/angular-bs4-from-assets

    Login or Signup to reply.
  2. 0

    The best way is to install this js and CSS which is the proper way

    Use this commands for the bootstrap and fontawesome installation 

    npm i bootstrap
npm i font-awesome
// For angular font awesome use
npm i angular-font-awesome

    Then add there links in styles and scripts in angular.json file

    Login or Signup to reply.
  3. 0

    When building single page application the goal is to keep its size as small as possible, and importing entire library into the component is not the way to do it… In order to use Font Awesome you need to use following Angular FontAwesome library It supports imports and tree-shaking.

    In order to use Bootstrap 4 you don’t need min version – you need SASS files, thus you need to:
    1. Install it as a package
    2. Import bootstrap into global styles, I use variables to import:

    @import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';

    Import in global styles.scss

    @import '~bootstrap/scss/bootstrap-grid.scss';
@import 'variables.scss'
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search