How do I import bootstrap-sass? about sass-loader HOT 30 CLOSED

Setting icon path works, but you need to prefix the path with a ~:

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "bootstrap-sass/assets/stylesheets/_bootstrap.scss";

If you don't add the ~ then it gets translated to ./bootstrap-sass/assets/fonts/bootstrap.
Thanks!

from sass-loader.

I found that setting $bootstrap-sass-asset-helper: true instead of using $icon-font-path solved the issue; $icon-font-path was not really helping.

from sass-loader.

👍

from sass-loader.

hi all. i got the same error as @kurtharriger then tried the solution he presents, BUT... i then get the following error (filepaths specific to my system omitted via elipsis):

... Module not found: Error: Cannot resolve module 'file' ....
... Module not found: Error: Cannot resolve module 'url' in ...

these are the import statements i'm using:

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

and i have bootstrap-sass installed in my node_modules directory.

anyone have any guesses as to what's going on or possible fixes?

from sass-loader.

👍

from sass-loader.

@danpantry thank you! I searched high and low. only if this was in the README the search would not have been needed. Can update the README?

$bootstrap-sass-asset-helper: true;
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

from sass-loader.

exists a variable that fix the problem with the relative/absolute path, all that you need is set the variable $bootstrap-sass-asset-helper in true and that's all.

PS: do that before the importation of bootstrap:

$bootstrap-sass-asset-helper: true;
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

from sass-loader.

answered my own question (which i'll leave here in case anyone else encounters the same problem:

$ npm install file-loader --save
$ npm install url-loader --save

from sass-loader.

This worked for me:

@import "~bootstrap-sass/assets/stylesheets/_bootstrap-sprockets.scss";
@import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss";

from sass-loader.

but why doesn't @import "bootstrap" work?

Would love an explanation for why we need the work around!

from sass-loader.

I don't know what the correct settings are, but you probably need to adjust the $icon-font-path-variable. Bootstrap provides the possibility to configure the path to the icon fonts. Make sure that the url() is pointing from the imported file (probably /assets/stylesheets/_bootstrap.scss in your case) to the font-files.

from sass-loader.

You need to think from the css-loader's perspective. It gets a css-file with url() statements referencing files. Now you need to start from the css-file's location and walk the relative url to the file and look if the path is correct.

from sass-loader.

Thanks to @danpantry, $bootstrap-sass-asset-helper solve the problem, set the $icon-font-path wasn't working

from sass-loader.

@jhnns The note on that section specifically mentions $icon-font-path, which in this case is a red herring (I specifically noted that that did not work in my original comment). I suspect many people had consulted that documentation before searching for this issue..

from sass-loader.

but why doesn't @import "bootstrap" work?

And also why isn't $bootstrap-sass-asset-helper: true; the default?

from sass-loader.

As far as I can tell the relative path to the font files from _bootstrap.scss is correct. I didn't know the icon path could be specified before import, so Ill give that a try. I was thinking that sass-loader would/should resolve the relative urls and it would just work?

I don't intend to customize bootstrap at the moment so if I still have issues I'll just copy the precompiled in for now. I just figured using the sass-loader would simplify packaging.

Thanks

from sass-loader.

Ah okay now I get it. Perhaps the sass loader could update the resulting css, but not entirely sure how easy that would be. Probably need to use the source map to determine original path or maybe it would be easier to update path prior to processing so output is correct?

Now I understand why the relative path doesn't just work. Thanks

from sass-loader.

Related discussions: sass/sass#1015 sass/libsass#532

You could also try this sass mixin to achieve relative urls.

from sass-loader.

Thanks a lot!

from sass-loader.

$bootstrap-sass-asset-helper might also work. However, setting $icon-font-path relative to the scss entry file does also work. I'm using this setting in my projects.

from sass-loader.

There is a test for bootstrap. It must be related to your local config.

from sass-loader.

@danpantry answer is the best $bootstrap-sass-asset-helper option, if anybody else stumbles here.

from sass-loader.

@danpantry Thanks man. You are a life-saver.

from sass-loader.

There's a note about this problem at https://github.com/jtangelder/sass-loader#problems-with-url. Why was this not helpful? We have a test for bootstrap: https://github.com/jtangelder/sass-loader/blob/master/test/scss/bootstrap-sass.scss

from sass-loader.

Thanks @danpantry . Saved my time 👍

from sass-loader.

Thanks @Grievoushead. Your solution worked for me.

from sass-loader.

I had a $icon-font-path: '../old/path !default' in code which prevented from assigning any other values to $icon-font-path..

from sass-loader.

@moiguitarrock, looking at the network requests, it looks like this setting sets url to an outside server hosting the files instead of the local ones bundled in with webpack.

from sass-loader.

@JohnGallego I don't see this behaviour on my local

from sass-loader.

I need to know the same answer as @teknicalissue wants to know.

from sass-loader.