As I venture into the world of web design, I've decided to dive deep into learning Flask. The foundation of my web application has been laid out and now it's time to add some style.
I recently obtained the compiled CSS and JS files from Bootstrap, and I'm eager to integrate them into my customized SCSS file so that I can utilize and build upon its features using @extend. Here is a snippet of my test code:
@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 issue arises when I attempt to run sass and convert this into a CSS file - an error message stating:
"The selector ".navbar" was not found."
This same error persists regardless of which .class or #id I try to @extend. Furthermore, when I navigate to the "bootstrap.css" file within its folder, everything appears normal. However, if I follow the @import link (which I've copied into my test.scss) from Visual Studio Code editor, an error window pops up with the message:
"Unable to open 'bootstrap.css'
resource not available"