Adding custom css to boostrap project-CodePudding

I am using SCSS to generate my CSS. This is what I have in my main.scss file. After it gets compiled to css it happens to be the same as well.

.my-custom-row {
    background-color: bisque;
}

This is in my index.html file. It's the entire thing.

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="./stylesheets/main.css" rel="stylesheet">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

  <!-- 
        Everything is in a grid. A grid is a collection of rows and columns.
        Each column can support 12 units. A unit is one element (as far as I can tell). 
        It can be set so that depending on screen size, the way things are layed out
        are different as well. 
      -->
  <title>Jia Hong's website</title>
</head>

<body>
  <div >
    <div >
      <div ><div >Col One</div></div>
      <div ><div >Col Two</div></div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
    integrity="sha384-Xe 8cL9oJa6tN/veChSP7q mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
    integrity="sha384-ODmDIVzN pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
    crossorigin="anonymous"></script>
</body>

</html>

This is my project structure.

.
├── html
│   └── index.html
├── scss
│   └── main.scss
└── stylesheets
    ├── main.css
    └── main.css.map

I have looked at some videos and such on how to include css into my website/project but for some reason it just doesn't work. The background inside of the .my-custom-row just doesn't change. I have no idea why.

CodePudding user response：

This may have to do with the browser cache. Have you tried hard refreshing the browser? Anytime you make changes to CSS, JavaScript and are viewing the page you've updated - you will see this concern. You can force a refresh by pressing CTRL F5 on the browser and that will get the latest version. Some more info

CodePudding user response：

First, please follow this folder structure. This kind of structure provides your project with a solid base or scale.

├── Project Name
│   └── index.html
├── assets
    └── images
        └── logo.svg
        └── other images
    └── css
        └── main.scss
    └── js
        └── main.js

After this, please download and enable the Live Sass Compiler in VS Code editor and follow the steps.

To compile CSS you need to add 3 lines of code in the Live Sass Compiler setting.json file and the code is

  "liveSassCompile.settings.formats": [
    {
      "format": "compressed",
      "extensionName": ".min.css",
      "savePath": null
    }
  ],

you can watch this video https://youtu.be/cpbN0YAW44g

After this, you can see the main.min.css file automatically created in your CSS folder and now you can call CSS file like this

<link href="assets/css/main.min.css" rel="stylesheet">

Now run and check; it should work :)