Posted by on December 28, 2018 at 11:01 am in Bootstrap, Web Development
Updated: January 6, 2019 at 5:35 pm
Featured image

When importing Bootstrap files into your own sass, you might encounter this pesky error that might leave you scratching your head.

The source of the error is a simple, often overlooked, way of importing files into sass.

Suppose, you have your style.scss file in your project’s styles subfolder, i.e. project/styles/style.scss. You have Bootstrap files located under the folder project/bootstrap/scss. In order to import Bootstrap files into your own style.scss file, add the following bit of code at the very end of the file.

@import "../bootstrap/scss/bootstrap";

which is similar to

@import "../bootstrap/scss/bootstrap.scss";

The omission of the extension in the official docs often confuse newcomers. Specifically, don’t forget to add the /bootstrap file after /scss!

Tags: bootstrap, file not found, overriding, scss

Related Posts

  • Featured Image
    WordPress – Showing cookie consent in comments
    WordPress has a neat feature that allows visitors to save their details in the browser when commenting. This prevents repeated typing fatigue. However, this option might not show up under the comments – even if the option is checked in the Admin settings page.
  • WordPress – Fixing issues with comment form not moving
    Sometimes, you might notice the comment form not moving underneath a comment as expected. I had a similar bug in one of my themes. I used the same functions and structures in two themes, but one had the comment form working properly, whereas in the other the comment form wasn’t moving. After spending hours trying […]
  • jQuery – Fixing HTML anchor tags with fixed navbars
    You may have noticed that your HTML # anchor tags no longer line up properly if you have a fixed navbar. It’s easily fixable with some simple jQuery.
  • Featured Image
    SSH command cheatsheet
    I find myself frequently using SSH to perform commands that otherwise take painfully long over regular FTP. I keep the following cheatsheet nearby to help me out.
  • Featured Image
    WordPress – Moving all scripts from header to footer
    It is a recommended practice to link all your JavaScript files towards the bottom of your web page, just before the closing </body> tag. To do this in WordPress, just insert the following code anywhere in your theme’s functions.php file.