How to get Bootstrap 4 sass working?

[alvipeo]

I'm trying to use CLI and I need my project to use Bootstrap 4 alpha. I managed to get its .js files and dependencies but I don't understand how to use bootstrap's sass files (how to integrate bootstrap styles based on its sass). Could anyone help with this one?

I saw a mention on sass in general here https://github.com/angular/angular-cli#css-preprocessor-integration, but it's not enough.

Please help. Thanks!

[sergiocosus]

Supposing that you already installed node-sass in your project, try put a file vendor.scss on the app folder with the following content
@import '../../node_modules/bootstrap/scss/bootstrap-flex';
Then include in the index.html
<link rel="stylesheet" type="text/css" href="app/vendor.css">

Works to me, but I don't know if it is the best practice

[alvipeo]

thanks, that worked. But I'm sure angular cli team should make it more simple. The reason are:

1. not everyone and every app will use material
2. material will not be ready at least in 6 months (considering their announced plans)

So, I have to ask Google team - what is the best practice to use Bootstrap 4? And other UI frameworks?

[alvipeo]

hm, now I bootstrap.js can't find tether.js but I see in Networks tab that it's loaded. What am I missing?

[alvipeo]

Here's how my setting files look like:

1. angular-cli-build.js:

/* global require, module */

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/*.js',
      'es6-shim/es6-shim.js',
      'reflect-metadata/*.js',
      'rxjs/**/*.js',
      '@angular/**/*.js',
      'moment/moment.js',
      'jquery/dist/jquery.min.js',
      'tether/dist/js/tether.min.js',
      'bootstrap/dist/js/bootstrap.min.js'
    ]
  });
};

1. system-config.ts:

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  'jquery': 'vendor/jquery/dist/jquery.min.js',
  'tether': 'vendor/tether/dist/js/tether.min.js',
  'bootstrap': 'vendor/bootstrap/dist/js/bootstrap.min.js'
};

/** User packages configuration. */
const packages: any = {
};

////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * Everything underneath this line is managed by the CLI.
 **********************************************************************************************/
const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',

  // App specific barrels.
  'app',
  'app/shared',
  /** @cli-barrel */
];

const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
  cliSystemConfigPackages[barrelName] = { main: 'index' };
});

/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js'
  },
  packages: cliSystemConfigPackages
});

// Apply the user's configuration.
System.config({
  map, packages,
  // meta: { 'bootstrap': { deps: ['tether'] } }
});

Notice the meta: { 'bootstrap': { deps: ['tether'] } } here. That doesn't work either.

What works is including this

<script src="vendor/tether//dist/js/tether.min.js"></script>

in index.html. Now it's working.

So, how do I get rid of that script tag and why it doesn't work without it?

[pavanpodila]

Including the bootstrap sass with @import '../../node_modules/bootstrap/scss/bootstrap'; is still failing with the following error:

Error: File to import not found or unreadable: ../../node_modules/bootstrap/scss/bootstrap

However if I remove the ../../ for the import path, it works. The Sass plugin is assuming all paths will be relative to the top-level directory. Doesn't sound right and I also lose all the intellisense support in WebStorm.

[intellix]

This is something I'm thinking angular-cli should generate for you, an index.scss alongside your index.html and then a reference inside there for it.

src/index.scss

@import 'node_modules/bootstrap/scss/bootstrap';

You don't need to copy across any vendor folders, you just reference node_modules. I think we need a place for top-level index styles, as if you reference bootstrap within app.scss, you're going to get a tonne of styling getting injected

[alvipeo]

My tether script tag in the index.html causing other issues with tests. So I'm trying to find out a way of including it with system.js but still fail. Has anyone done this?

As to angular-cli generating bootstrap - I actually had the same idea. Many people will use Bootstrap 4 (btw it's almost reached alpha.3).

[yahyaKacem]

@alvipeo why would you use the js from bootstrap you could just import the scss and use ng2-bootstrap which uses bootstrap 4, this way if you use the adjustment that @pavanpodila mentioned you can import the scss files, that's what I was doing with angular2-beta and now migrating to rc-1 with this approach too, do you have any reason you care to share about why using the original bootstrap.js file?

[alvipeo]

Well, because I want to have a freedom to use whatever I want and do not mix a pile of dependencies, which makes it so hard to follow. You want examples? I think you know what I'm talking about. Besides, if I need to use a component which is not part of ng2-bootstrap (or even Bootstrap itself) I'll just do it myself. But then, I need to have some base working.

Also, I just want to work on my project and not building a build (when framework version changes or any of those dependencies I'll have to wait until its version becomes compatible with each other, etc).

[hijoncon]

Caught in the same page. This is what I did to solve the missing piece.
I created a new file src/app/styles/main.scss inside of main.scss I have these:

$icon-font-path: '../../vendor/bootstrap-sass/assets/fonts/bootstrap/';
@import "../../../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap";

in my angular-cli-build.js I added this:

'bootstrap-sass/assets/**'

Hopefully that works for you!

[alvipeo]

No problems with assets, the problem is with tether.js.

[hijoncon]

Gotcha! My suggestion is, I think those plugins are not available in typings. Include them in your index.html

First step make sure you added them in your angular-cli-builds so it will be available in your dist then add those scripts in your index.html

<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="vendor/tether/dist/js/tether.min.js"></script>
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

Then to execute them in your component you have to have

import { Component, OnInit } from '@angular/core';
declare var jQuery:any;
export class LeafComponent implements OnInit {
ngOnInit() {
//execute jquery
}
}

[alvipeo]

Look at my reply 2 weeks ago - #630 (comment). I did that and it works. BUT! Tests do not work in this case. So its either app works or tests. Not both.