In the end you're always connecting your .css file to your style sheet. Never the scss/sass file itself.

You could use the VSCode (or any other IDE) Sass compiler plugin. But I prefer to do it manually as the compilers sometimes result in bugs for me.

I personally do the following:

In your terminal enter the following to install in your project directory:

npm install sass --save(previously dart-sass)

npm install bootstrap --save

npm install autoprefixer

or in one line:

npm install sass bootstrap autoprefixer --save

Within your project root create a "scss" folder, and within that, a file named "styles.scss"

This will be the file from which all imported sass is compiled into your destination.css file.

Then, you must create a script in your package.json to the scripts. I use the following:

"compileSass": "sass --watch scss:public/css"

Please note that the --watch means that whenever you save your modified. Please note that the public/css dictates where the compiled file will be saved relative to your scss folder you just created.

In a new tab in your terminal, start your compiler by entering

npm run compileSass

Or whatever name you gave to your script in the package.json file.

THEN when you link your CSS file as a stylesheet it will be the compiled CSS that was generated from your styles.scss.

In terminal run this command in the folder where the systlesheets are:

sass --watch style.scss:style.css 

Source:

http://sass-lang.com/

When ever it notices a change in the .scss file it will update your .css

This only works when your .scss is on your local machine. Try copying the code to a file and running it locally.