Angular-cli: 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 - https://github.com/angular/angular-cli/issues/630#issuecomment-217301856. I did that and it works. BUT! Tests do not work in this case. So its either app works or tests. Not both.

[pablodenadai]

I'm also having trouble copying the fonts into the distribution package.

Edit: For now I'm just copying it to app/fonts manually. It'd be nice if it was automated though.

[silentHoo]

We have the very same problem here. I'll give you an example with our config: We have generated our app with angular-cli and place the main.scss directly under src/app. We have placed severeal other *.scss files in different folders and want to include them:

src/app/main.scss:

@import "in-app";                     /* src/app/in-app.scss -> is found! */
@import "hacks/in-hacks";             /* src/app/hacks/in-hacks.scss -> is found! */
@import "../in-src";                  /* src/in-src.scss -> is found! */
@import "../../src/in-src";           /* src/in-src.scss -> is found! */
@import "../../../src/in-src";        /* src/in-src.scss -> is found, but shouldn't that be "jailed" into the project folder? */
@import "../../in-root";              /* in-root.scss -> should work, but doesn't! */
@import "../../../in-root";           /* in-root.scss -> is found, but why? */
@import "../../../../in-workspace";   /* ../in-workspace.scss -> is found! */

Something is wrong here. If we shouldn't leave the root directory, we also shouldn't be able to use another ../ to workaround that restrictions to access our files. Is this a bug or what is happening here?

[natsu90]

Hi guys, I'm trying to get PrimerCSS working, https://github.com/primer/primer. I've installed it & its dependencies with NPM and added @import "node_modules/primer-css/index.scss in src/index.scss.

But it can't resolve its dependencies. I'm getting following error,

Error: File to import not found or unreadable: primer-support/index.scss
Parent style sheet: /Users/sulaiman/Workspace/github-profile/node_modules/primer-css/index.scss

This is inside the primer-css/index.scss:

@import "primer-support/index.scss";
@import "primer-base/index.scss";
@import "primer-utilities/index.scss";

@import "primer-forms/index.scss";
@import "primer-layout/index.scss";
@import "primer-buttons/index.scss";
@import "primer-alerts/index.scss";
@import "primer-avatars/index.scss";
@import "primer-blankslate/index.scss";
@import "primer-navigation/index.scss";
@import "primer-states/index.scss";
@import "primer-tooltips/index.scss";

@import "primer-flex-table/index.scss";
@import "primer-truncate/index.scss";

What did I miss?

[neilhem]

You should define full path @import "node_modules/primer-css/index

[natsu90]

@neilhem Hi, yes I did and it's throwing the error here, https://github.com/primer/primer/blob/master/index.scss#L14. The primer-support module is already installed. I also tried to load from dist/vendor folder but still getting same error.

[bruno-serfe]

Hi Guys, I've installed a theme into the angular-cli project, as @natsu90 I've the same issue but I'm using bootstrap 3.x

File: /home/vagrant/code/Application/tmp/sassplugin-input_base_path-i25MAvFd.tmp/0/src/app/assets/theme/mytheme/src/sass/bootstrap/mixins.scss (5)
The Broccoli Plugin: [SASSPlugin] failed with:
Error: File to import not found or unreadable: mixins/hide-text.scss
Parent style sheet: /home/vagrant/code/Application/tmp/sassplugin-input_base_path-i25MAvFd.tmp/0/src/app/assets/theme/mytheme/src/sass/bootstrap/mixins.scss
at Object.module.exports.renderSync (/home/vagrant/code/Application/node_modules/node-sass/lib/index.js:420:22)

Have any of you, an idea of what's happening here?

paths are:

file trying to import child: /src/app/assets/theme/mytheme/src/sass/bootstrap/mixins.scss
child: /src/app/assets/theme/mytheme/src/sass/mixins/hide-text.scss

any help will be appreciated, thanks.

[filipesilva]

The problems described in this issue (using Bootstrap 4 sass) should be fixed in #1455.

[darbio]

@natsu90 you should add the following into your angular-cli-build.js file before vendorNpmFiles

sassCompiler: { includePaths: [ 'node_modules' ] },

[david-salvador]

It is explained in
https://github.com/angular/angular-cli

[xgqfrms-GitHub]

https://github.com/angular/angular-cli#global-library-installation

[doxasoft]

A dedicated wiki page of Angular CLI: https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}