CSS file has square boxes as value after converting from SCSS

Front End Help
#1

When I refer to font-awesome CSS file in my index.html:

<link
  rel="stylesheet"
  href="./node_modules/font-awesome/css/font-awesome.min.css"
/>

The font awesome icons will turn out ok.

However, if I import the font-awesome scss into my styles.scss and convert the styles.scss to styles.css, the value of the font-awesome icon will be a square with the actual value inside it. What appear in the webpage for the FA icon will also be a square with the value in it, instead of the actual FA icon.

styles.scss

@import '.././node_modules/font-awesome/scss/font-awesome.scss';

styles.css

.fa-home:before {
  content: "";  //f015 inside the square
}

Correct value:

fa-home:before{
  content:"\f015"
}

Any advice, please?

Thank you!