0 
$enable-grid-classes: false;
$enable-cssgrid:true;

$deepBlue: #032f3e;

body {
    --bs-body-bg: orange ;
}

@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&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:[email protected]&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 use a sass variable in order to apply a background-color to the scss stylesshet. I have a live compiler. I am able to use the --bs-body-bg: #(any-color) to apply settings but I am unable to apply the variables I would like to use.I have also tried changing the variables inside the variables.scss file in nodemules.

I tried using different compilers. I tried removing the custom.css and custom.scss files so they can get compile again. The variables that i create in the scss file does not work at all. Only if I put in --bs-*.I am using bootstrap version 5.3.3. I don't want to interpolate. Thank you

1 Answer 1

Reset to default
0

You should only load the compiled custom.css in the head of your html file, cause html can't understand the bootstrap.scss file. Also I don't know what compiler are you using but take a look at the official documentation @ https://getbootstrap.com/docs/5.3/customize/sass/ about importing, customizing and compiling the source sass files. You also have guides for different compilers there (webpack, vite, etc.)

3
  • What is it that I have that I am loading a scss bootstrap ? is it the bootstrap.scss file ? also I am using the Live Sass Compiler bit Ritwick Dey. can you tell me how to override the default variable for bootstrap ? to use a certain font family ?
    – cloudp7
    Commented Jul 2 at 18:45
  • As the official docs says about customizing scss variables, you must import "../node_modules/bootstrap/scss/functions" at the top of your custom.scss file, then put your variables overrides, and AFTER that, import "../node_modules/bootstrap/scss/variables" and the rest of the bootstrap scss parts. The order is important. Finally, you can compile your custom.scss file via 'sass --watch ./scss/custom.scss ./css/custom.css'or usign the Live sass compiler. Take a look at the official boostrap docs @ getbootstrap.com/docs/5.3/customize/sass, the details and instructions are all there.
    – Federico
    Commented Jul 3 at 20:29
  • Also you can find the complete list of boostrap variables at scss/_variables.scss. I suggest you to take your time to inspect that file. For example, to define the font family, you need to override '$font-family-base' sass variable in your custom.scss file: $font-family-base: 'Inter', sans-serif;
    – Federico
    Commented Jul 3 at 20:36

Not the answer you're looking for? Browse other questions tagged or ask your own question.