question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How do I import bootstrap-sass?

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 9 years ago
  • Reactions:13
  • Comments:30 (7 by maintainers)

github_iconTop GitHub Comments

232reactions
kurtharrigercommented, Jan 16, 2015

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!

98reactions
trinitroglycerincommented, Apr 19, 2016

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Sass · Bootstrap v5.0
In your custom.scss , you'll import Bootstrap's source Sass files. You have two options: include all of Bootstrap, or pick the parts you...
Read more >
How to use Bootstrap properly (sass import) Starting Craft
So what is the right way to use Bootstrap? ... Importing it with Sass and tweaking variables until it fits your needs! ......
Read more >
How to Set Up Your Sass Package in Bootstrap - Solodev
These are some basic tips to help get your first Sass package set up. ... There are two ways of importing Bootstrap files...
Read more >
How to Customize Bootstrap with Sass - freeCodeCamp
And we are going to import all of Bootstrap in the custom.scss file. //custom.scss @import "../node_modules/bootstrap/scss/bootstrap";.
Read more >
How to import and customize bootstrap with @use in SASS ...
// customBootstrap.scss @import url('./customVariables'); @import url('~bootstrap/scss/bootstrap');. It is important to import customVariables ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found