How do I import bootstrap-sass?

[kurtharriger]

added this stuff to webpack loaders:

    {test: /\.scss/, loader: 'style!css!sass?includePaths[]=' +
        (path.resolve(__dirname, "./node_modules"))},
    {test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
    {test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }

and in my scss:
@import "bootstrap-sass/assets/stylesheets/_bootstrap.scss";

But I get bunch of errors resolving the relative paths with bootstrap-sass

ERROR in .//css-loader!.//sass-loader?includePaths[]=/Users/kharriger/code/webpack-template/node_modules!./src/sass/all.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/bootstrap/glyphicons-halflings-regular.eot in /Users/kharriger/code/webpack-template/src/sass
@ .//css-loader!.//sass-loader?includePaths[]=/Users/kharriger/code/webpack-template/node_modules!./src/sass/all.scss 2:3068-3130 2:3144-3206

ERROR in .//css-loader!.//sass-loader?includePaths[]=/Users/kharriger/code/webpack-template/node_modules!./src/sass/all.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/bootstrap/glyphicons-halflings-regular.woff in /Users/kharriger/code/webpack-template/src/sass
@ .//css-loader!.//sass-loader?i

[jhnns]

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.

[kurtharriger]

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

[jhnns]

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.

[kurtharriger]

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

[jhnns]

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

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

[kurtharriger]

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!

[aguestuser]

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?

[aguestuser]

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

[jhnns]

👍

[osasseville]

Thanks a lot!

[sahil87]

👍

[punmechanic]

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.

[jhnns]

$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.

[albttx]

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

[jhnns]

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

[akras14]

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

[seancheung]

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

[6zz]

@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";

[jhnns]

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

[punmechanic]

@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..

[satyaprakash-k]

Thanks @danpantry . Saved my time 👍

[SerhiiKozachenko]

This worked for me:

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

[arvinsim]

Thanks @Grievoushead. Your solution worked for me.

[tsuz]

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

[moiguitarrock]

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";

[calcazar]

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

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

[JohnGallego]

@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.

[monarchwadia]

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

[ChristianGalvez23]

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

[lorencole]

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

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