Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How do I import bootstrap-sass? #40

Closed
kurtharriger opened this issue Jan 13, 2015 · 30 comments
Closed

How do I import bootstrap-sass? #40

kurtharriger opened this issue Jan 13, 2015 · 30 comments

Comments

@kurtharriger
Copy link

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
Copy link
Member

jhnns commented Jan 14, 2015

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
Copy link
Author

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
Copy link
Member

jhnns commented Jan 15, 2015

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
Copy link
Author

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
Copy link
Member

jhnns commented Jan 16, 2015

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

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

@kurtharriger
Copy link
Author

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
Copy link

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
Copy link

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
Copy link
Member

jhnns commented Jun 3, 2015

👍

@osasseville
Copy link

Thanks a lot!

@sahil87
Copy link

sahil87 commented Oct 18, 2015

👍

@punmechanic
Copy link

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
Copy link
Member

jhnns commented Apr 19, 2016

$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
Copy link

albttx commented May 2, 2016

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

@jhnns
Copy link
Member

jhnns commented May 2, 2016

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

@akras14
Copy link

akras14 commented Sep 28, 2016

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

@seancheung
Copy link

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

@6zz
Copy link

6zz commented Oct 26, 2016

@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
Copy link
Member

jhnns commented Oct 27, 2016

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
Copy link

punmechanic commented Oct 28, 2016

@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
Copy link

Thanks @danpantry . Saved my time 👍

@SerhiiKozachenko
Copy link

This worked for me:

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

@arvinsim
Copy link

arvinsim commented Jan 9, 2017

Thanks @Grievoushead. Your solution worked for me.

@tsuz
Copy link

tsuz commented Feb 21, 2017

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

@moiguitarrock
Copy link

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
Copy link

calcazar commented May 9, 2017

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

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

@JohnGallego
Copy link

@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
Copy link

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

@ChristianGalvez23
Copy link

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

@lorencole
Copy link

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests