SCSS converted CSS file only work in certain folder

My folder structure is as follows:

/node_modules/font-awesome/scss/font-awesome.scss
/css/styles.scss
/css/styles.css
/dist/css/
/index.html

In my styles.scss, I imported the fontawesome scss with

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

styles.scss is then converted to styles.css.

When styles.css is residing in /css , the fontawesome icon will appear as square boxes when index.html is loaded. If I move the same file to dist/css/ folder and link it appropriately in index.html, the fontawesome icons will appear correctly.

Any tip and advice is greatly appreciated.

Thanks.