-
-
Notifications
You must be signed in to change notification settings - Fork 431
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
Comments
I don't know what the correct settings are, but you probably need to adjust the |
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 |
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. |
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 |
Related discussions: sass/sass#1015 sass/libsass#532 You could also try this sass mixin to achieve relative urls. |
Setting icon path works, but you need to prefix the path with a ~: $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/"; If you don't add the ~ then it gets translated to ./bootstrap-sass/assets/fonts/bootstrap. |
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 anyone have any guesses as to what's going on or possible fixes? |
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 |
👍 |
Thanks a lot! |
👍 |
I found that setting |
|
Thanks to @danpantry, |
There is a test for bootstrap. It must be related to your local config. |
@danpantry answer is the best |
@danpantry Thanks man. You are a life-saver. |
@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?
|
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 |
@jhnns The note on that section specifically mentions |
Thanks @danpantry . Saved my time 👍 |
This worked for me:
|
Thanks @Grievoushead. Your solution worked for me. |
I had a |
exists a variable that fix the problem with the relative/absolute path, all that you need is set the variable PS: do that before the importation of bootstrap:
|
but why doesn't @import "bootstrap" work? Would love an explanation for why we need the work around! |
@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. |
@JohnGallego I don't see this behaviour on my local |
I need to know the same answer as @teknicalissue wants to know. |
And also why isn't |
added this stuff to webpack loaders:
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.scssModule 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-3206ERROR in ./
/css-loader!.//sass-loader?includePaths[]=/Users/kharriger/code/webpack-template/node_modules!./src/sass/all.scssModule 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?iThe text was updated successfully, but these errors were encountered: