$enable-grid-classes: false;
$enable-cssgrid:true;
$deepBlue: #032f3e;
body {
--bs-body-bg: orange ;
}
@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4631212e32067576766868717676">[email protected]</a>&display=swap";
@import "../node_modules/bootstrap/scss/bootstrap";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e5949465a6e1d1e1e0000191e1e">[email protected]</a>&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./scss/custom.css">
<link rel="stylesheet" href="./node_modules/bootstrap/scss/bootstrap.scss">
<title>Frontend Mentor | Single-page developer portfolio</title>
</head>
<body>
<div class="container-fluid">
<h1 class="h1">Hello World!</h1>
</div>
i am trying to utilize a sass variable in order to incorporate a background-color into the scss stylesheet. Despite having a live compiler, I am encountering difficulties using the desired variables. Although I can apply settings using --bs-body-bg: #(any-color), the specific variables I intend to employ do not work as expected. I have attempted to modify the variables within the variables.scss file in nodemules.
I have experimented with various compilers and even removed the custom.css and custom.scss files for recompilation. Unfortunately, the variables created in the scss file refuse to function properly unless entered as --bs-*. Currently working with bootstrap version 5.3.3, and opting against interpolation. Thank you.