Including Font-awesome & Bootstrap SASS

[roymj88]

Hi,

Please note that ive seen https://github.com/AngularClass/NG6-starter/issues/97 & https://github.com/AngularClass/NG6-starter/issues/99 and it doesnt provide a solution or a clear step and hence opening an issue here.

Ive setup base using NG6-starter and currently im trying to add external modules like bootstrap, fontawesome etc.

For Bootstrap i did the following:

╰─$ npm install --save angular-ui-bootstrap bootstrap
╰─$ npm install bootstrap-sass --save 

In app.js

import Bootstrap from 'angular-ui-bootstrap';

angular.module('app', [
    uiRouter,
    Common,
    Components,
    Bootstrap
  ])

This gives following error

Uncaught Error: Cannot find module "!!../../node_modules/css-loader/index.js!../../node_modules/sass-loader/index.js!./app.scss"
    at webpackMissingModule (app.scss:4)
    at Object.416 (app.scss:4)
    at __webpack_require__ (bootstrap 381c5ef…:585)
    at fn (bootstrap 381c5ef…:109)
    at Object.414 (app.component.js:2)
    at __webpack_require__ (bootstrap 381c5ef…:585)
    at fn (bootstrap 381c5ef…:109)
    at Object.312 (app.js:5)
    at __webpack_require__ (bootstrap 381c5ef…:585)
    at fn (bootstrap 381c5ef…:109)

For CSS, tried:

@import '../node_modules/bootstrap/dist/css/bootstrap';

And this also ends in error.

For Font-awesome, i tried the following:

╰─$ npm install font-awesome --save                                                                               

In App.scss

@import 'font-awesome/scss/font-awesome.scss';    

Both doesnt work. Help is much appreciated.

[ghost]

First get bootstrap-loader. Follow the install instructions and make sure to install bootstrap-sass. Pay attention to its dependencies as they may not be installed automatically (url-loader and file-loader for instance).

As of the installation of bootstrap-loader. Make sure to use the entry property instead of the require attribute.

In case you encounter an error during npm start like:

cannot read file. Use an appropriate loader ... some special signs or artifacts... <?>

Go here and adapt url-loader config.

[timothylombrana]

@hanssulo tried this, there seems to be an issue with bootstrap loader and newer node versions. We're you able to get it to work and if so which version of node? Also maybe you could share the config file, please.