importing multiple scss files not working in express app - sass

Question

I am using node-sass-middleware and so far i had one scss file and it was working just fine. Now created another scss file and using the second file link on top the first file using this.
#media screen and (min-width: 769px) {
.quizes-container {
justify-content: space-between;
.card {
width: 32.5%;
}
}
.quiz-container-title {
div {
padding-right: 1em;
}
}
}
and imported like this #use 'media_queries';
However in my .css output the codes from the second file is not showing at all.
I am really confused.

Answer 1

SCSS files need to be imported using the #import keyword.
#import "media_queries";

Answer 2

node-sass-middleware uses node-sass for compiling sass to css, However node-sass is deprecated.
Warning: LibSass and Node Sass are deprecated. While they will
continue to receive maintenance releases indefinitely, there are no
plans to add additional features or compatibility with any new CSS or
Sass features. Projects that still use it should move onto Dart Sass.
and even node-sass-middleware is dead (I think) because there is no activity and no new releases.
Github Open Question
If you want to continue with this then you need to use old #import syntax, the new syntax #use will not work.
#import "media_queries";
Or switch to new Dart Sass
Implementing node-sass-middleware with new dart sass, use this gist, create new file (sass-middleware) and add the content to newly created file, then import it like this, then you are good to go.
/*index.js*/
//const sassMiddleware = require('node-sass-middleware');
const sassMiddleware = require('./sass-middleware');
Note: That gist I have created is a copy of node-sass-middleware but with new dart sass implementation, So all credit goes to node-sass-middleware