Menu
I am using angular-cli: 1.0.0-beta.19-3 with node: v5.11.1
In my angular-cli.json file, i have set the global style file extension to .scss.
Here is my styles file.
angular2/src/styles.scss
// Default Font
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
// Typography
$font-family-sans-serif: "Raleway", sans-serif;
$font-size-base: 14px;
$line-height-base: 1.6;
$text-color: #636b6f;
// Import bootstrap
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
Errors spits out when I try to import bootrap-sass modules, it gives an error associated to glyphicon icons. Don't know how to resolve it.
ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.scss
Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.eot' in '/var/www/angular/src'
@ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.scss 6:4253-4315 6:4338-4400
@ ./src/styles.scss
@ multi styles
ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.scss
Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.woff2' in '/var/www/angular2/src'
@ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.scss 6:4452-4516
@ ./src/styles.scss
@ multi styles
ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.scss
Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.woff' in '/var/www/angular2/src'
@ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.scss 6:4549-4612
@ ./src/styles.scss
@ multi styles
ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.scss
Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.ttf' in '/var/www/angular2/src'
@ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.scss 6:4644-4706
@ ./src/styles.scss
@ multi styles
ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.scss
Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.svg' in '/var/www/angular2/src'
@ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.scss 6:4742-4804
@ ./src/styles.scss
@ multi styles
761
Using Sass with the Angular CLI 1 Starting an Angular CLI Project with Sass. Normally, when we run ng new my-app, our app will have .css files. ... 2 Converting a Current App to Sass. ... 3 Using Sass Imports. ... 4 Importing Sass Files Into Angular Components. ... 5 Sass Include Paths. ... 6 Using Bootstrap Sass Files. ... 7 Conclusion. ...
How to Add Bootstrap to an Angular CLI project 1: Creating an Angular project with Angular CLI. The first step is creating your Angular project using Angular CLI. 2: Installing Bootstrap from NPM. Next, we need to install Bootstrap. ... As an alternative, you can also download the... 3: Importing ...
To get the CLI to generate .scss files (or .sass / .less) is an easy matter. You can also set the --style flag with the following: If you’ve already created your Angular CLI app with the default .css files, it will take a bit more work to convert it over.
ng2-bootstrapand ngx-bootstrapare the same package. ng2-bootstrap was renamed to ngx-bootstrap after #itsJustAngular. In case you want to install Bootstrap and ngx-bootstrap at the same time when you create your Angular CLI project:
After going through some research, I found solution here.
https://github.com/angular/angular-cli/issues/2170
I must set the icon path for glyphicons before importing bootstrap sass files. ie.
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
// Import bootstrap
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With