Failing to @import bootstrap.css. Unable to open "bootstrap.css" resource not available

Question

I'm new at web designing and I'm learning to use Flask. I've already done the structure of my web app and now I want to style it.

I've downloaded bootstrap Compiled CSS and JS, and I want to @import it into my customized scss file so then I can @extend some of it's features. My test code is:

@import 'C:/Users/lili_/Desktop/bootstrap-4.3.1-dist/css/bootstrap.css';
$navbar_color: red;
.my_navbar {
    @extend .navbar;
    background-color: $navbar_color;
}

The problem is that when I try to run sass and convert this into a css file, this error message shows up:

"The selector ".navbar" was not found."

It shows the same error with any .class or #id that I've tried to @extend. Also, when I open the "bootstrap.css" file by searching it in it's folder, it looks just fine, but when I try to follow the @import link (which I've copy-pasted on my test.scss) from the Visual Studio Code editor, an error window pops up claiming:

"Unable to open 'bootstrap.css'
resource not available"

You probably want to switch to a relative path instead of the absolute path you have provided. You probably have a folder for your project? Place your Bootstrap file in there (in an organised fashion ;)) and import it into your Sass file with the relative path. Maybe this reminder about paths will help! — chriskirknielsen
– chriskirknielsen, Commented May 7, 2020 at 15:28
Okey, I used a relative path and now at least I can follow the import link in Visual Studio Code, but I'm still not able to @extend anything: the same error massage than before. — LiliMat
– LiliMat, Commented May 7, 2020 at 19:14
I know it's a silly question, but you're sure there's a .navbar class in your bootstrap.css file? — chriskirknielsen
– chriskirknielsen, Commented May 7, 2020 at 19:17
jajaja, yes I'm positive. Also, it goes the same way for every other class i've tried to import — LiliMat
– LiliMat, Commented May 7, 2020 at 22:55

Xavin · Accepted Answer · 2020-05-07 19:26:32Z

0

I think you are mixing some things. For instance trying to @import a CSS file into a SCSS (SASS) file. At least, you have two reasonably options.

The first one would be to link the bootstrap CSS file into the \head tag into every HTML file (as is documented on the official documentation). And, after that call link your CSS file rewriting some style properties.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

The other would be to integrate an npm package that gives you Bootstrap partials in SCSS format that you can import into your main SCSS file.

answered May 7, 2020 at 19:26

Xavin

664 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

LiliMat Over a year ago

Thanks! that actually seems to be the problem.

Collectives™ on Stack Overflow

Failing to @import bootstrap.css. Unable to open "bootstrap.css" resource not available

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related