Geek Answers Handbook

Angular2 - bootstrap-sass compilation error using angular-cli

I am using angular-cli: 1.0.0-beta.19-3 with node: v5.11.1

In my angular-cli.json file, I installed the global style extension in .scss.

Here is my stylesheet.

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 pop up when I try to import bootrap-sass modules, this leads to an error related to character icons. I 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
+7
angular angular-cli bootstrap-sass
source share
3 answers

After doing some research, I found a solution here.

https://github.com/angular/angular-cli/issues/2170

I have to set the icon path for glyphics before importing bootstrap sass files. i.e.

 $icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/'; // Import bootstrap @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
+13
source share

I had the same issue with material designer fonts

 src: url("../font/material-design-icons/Material-Design-Icons.eot?#iefix") format("embedded-opentype"), url("../font/material-design-icons/Material-Design-Icons.woff") format("woff"), url("../font/material-design-icons/Material-Design-Icons.ttf") format("truetype"), url("../font/material-design-icons/Material-Design-Icons.svg#Material-Design-Icons") format("svg");

And the right way to do this is to simply add a “~” at the beginning of the line:

 src: url("~/font/material-design-icons/Material-Design-Icons.eot?#iefix") format("embedded-opentype"), url("../font/material-design-icons/Material-Design-Icons.woff") format("woff"), url("../font/material-design-icons/Material-Design-Icons.ttf") format("truetype"), url("../font/material-design-icons/Material-Design-Icons.svg#Material-Design-Icons") format("svg");
0
source share

Put this in your .angular-cli.json:

  "stylePreprocessorOptions": { "includePaths": [ "../node_modules" ] },
0
source share

More articles:


All Articles