[Django]-How do I include an external CSS file as a rule for a class inside a .scss file?

It should work if you import all the sass partials and wrap them in some type of namespace class:

.b3 {
    @import "/bootstrap-3.3.7-folder/_buttons.scss";
    @import "/bootstrap-3.3.7-folder/_grid.scss";
    @import "/bootstrap-3.3.7-folder/_somefile.scss";
    @import "/bootstrap-3.3.7-folder/_somefile.scss";
    @import "/bootstrap-3.3.7-folder/_etc.scss";
}

This will output all your bs-3.3.7 styles wrapped in .bs3 {}

.bs3 .btn {}
.bs3 .row {}
/* etc */

Then just wrap those elements

<div class="b3">
    <!-- all your 3.3.7 specific styles here -->
    <button class="btn">Click Me</button>
</div>

You can’t include css file in scss file.

There is a concept called partials in scss. This is a great way to modularize your CSS and help keep things easier to maintain.

A partial is simply a Scss file named with a leading underscore. You might name it something like _partial.scss.

The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file.

Scss partials are used with the @import directive and no need to specify file extension while importing.

To include a scss file in another scss file, try the below code and see the comment in code also.

Example,

 /*`_variable.scss` partial file*/

 $greencolor: green;
 $orangecolor: orange;


/*`_style.sass` partial file*/

@import 'variable';    /*here `variable` is the file name, if it is inside a folder named `variable`, then it should be `@import 'variable/variable'`*/

body{
   background-color:$orangecolor;
}