Problem compiling custom bootstrap in scss | Error with relative paths

[gperdomor]

Please provide us with the following information:

1. OS?
   macOS Sierra

2. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:
   angular-cli: 1.0.0-beta.14
   node: 6.5.0
   os: darwin x64

3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.
   Install bootstrap-sass and create a new scss file src/scss/bootstrap.scss and copy the content of the original bootstrap.scss in that file... Why create this file? because i need to import some extra files to override bootstrap styles

4. The log given by the failure. Normally this include a stack trace and some
   more information.
   ERROR in .//css-loader!.//postcss-loader!./~/sass-loader!./src/scss/bootstrap.scss
   Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.svg' in '/Users/xxxxxxxx/WebstormProjects/xxxxxxx/src/scss'

5. Mention any other details that might be useful.
   In previous project, using react, i need to configure resolve-url-loader in webpack:

   {
   test: /\.scss$/,
   loader: ExtractTextPlugin.extract("style", 'css?sourceMap!resolve-url!sass?sourceMap'),
   }
   

---

Thanks! We'll be in touch soon.

[JanStureNielsen]

The issue tracker is for bugs and feature requests; see CONTRIBUTING.md. For better support, consider creating a question on StackOverflow with all the details.

[gperdomor]

@JanStureNielsen well, angular-cli don't have any config to include the resolve-url loader, so, i think this could be considered as a feature request :D

[j2L4e]

$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';

is all you need...

[filipesilva]

@j2L4e seems like the right answer to me. He's configuring the directory used by bootstrap prior to importing it.

[gyoshev]

Just tried the suggestion with overriding the $icon-font-path variable, and it does not seem to work.

1. OS: Linux, Fedora 24
2. Versions: angular-cli: 1.0.0-beta.17, node: 4.6.0, os: linux x64
3. Repro steps:

   1. create app and add bootstrap-sass

       ng init --style=sass
       npm install --save bootstrap-sass
      

   2. change src/app/app.component.html to

       <span class="glyphicon glyphicon-camera"></span>
      

   3. edit src/app/app.component.sass to

       $icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
       @import '~bootstrap-sass/assets/stylesheets/bootstrap';
      

   4. run ng serve

Here is a repo with applied steps, and the hosted result -- the icons are not glyphicons, but unicode characters.

The bootstrap CSS is being built, but the browser requests the wrong URL:

[filipesilva]

Reopening to investigate @gyoshev's example.

[exequiel09]

Mine is set to this:

$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../node_modules/bootstrap-sass/assets/fonts/bootstrap/")

bootstrap.scss is imported in styles.sass like this:

$bootstrap-sass-asset-helper: false
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../node_modules/bootstrap-sass/assets/fonts/bootstrap/")
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap"

The .woff2 file is the renamed version of the glyphicon mainly because webpack renames it.

[0cv]

I have a similar problem with another library than bootstrap. The problem is actually quite "simple". In the library I'm using (like probably in bootstrap), the path between a css and an image is always relative to the css loading the file. It's not absolute or relative to anything else, because the library is not making any assumption where the module could be located.

However Angular CLI tries to resolve the path, not relatively to the loaded file, but relatively to the package.json of the project (or maybe angular-cli.json). This cause every such library to fail because the asset can never be located correctly.