visual-studio-codebootstrap-4sasslive-sass-compiler

Partial Compiling of SCSS file into CSS

I use lates Vscode with the extension "live SASS Compiler". I want to use bootstrap, so I linked a style.css file in html, which is supposed to have all the compiled bootstrap.css codes (including mine). To customize the Bootstrap theme, I have another style.scss file which imports the local bootstrap.scss file. Now after the import of local bootstrap.scss file in style.scss, I compiled/transpiled (watched) the scss file into style.css file, which works but partially, only the portion of extra scss code I added is transpiled to css, excluding all the bootstrap.css code. That's why my html is not getting bootstrap with style.css.

I am mentioning the portion of code for the simplicty. This is the html file:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Bootstrap Site</title>
  <link rel="stylesheet" href="/src/css/style.css" />
</head>

This is style.scss file, I watch/transpile this style.scss into style.css

@import url(/node_modules/bootstrap/scss/bootstrap.scss);
$bg-color: rgb(221, 204, 117);
$font-color: rgb(170, 12, 12);
body {
  background-color: $bg-color;
  color: $font-colo; 
}

This is the transpiled style.css file (with only the portion of code transpiled):

@import url(/node_modules/bootstrap/scss/bootstrap.scss);
body {
  background-color: #ddcc75;
  color: #aa0c0c;
}

As you can see the transpiled style.css file doesnt have all the bootstrap css codes, which is why the html is not linked with bootstrap (Bootstrap works only if I link it separately in another link tag). How do I make it work with style.css for the bootstrap theme customization?

N.B. Its NPM project, I used NPM to download bootstrap.

Solution

  • This is how I get it to work. I changed the scss file's code to something much simpler and made sure that the bootstrap.scss is located correctly. The one issue I found is that no matter what you do, u must @import the bootstrap file at the end. I dont know how to import only necessary files.

    // 2. Include any default variable overrides here
$body-color: rgb(238, 79, 30);
$body-bg : rgb(230, 224, 224);

// // 3. Include remainder of required Bootstrap stylesheets
@import  "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";


$custom-theme-colors: (
"altlight": rgb(189, 163, 194),
"altdark" : rgb(170, 90, 163)
);

$theme-colors : map-merge($custom-theme-colors , $theme-colors );

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