Heroku deployment failure - cannot import Sass files - reactjs

Question

Im trying to deploy using Heroku, but im getting an error regarding node-sass, importing sass files.
its seems to be a common problem with node-sass, but I couldn't find why the import of scss files is causing the problem. I've re-installed node-sass but that didn't help.
//package.json
{
"name": "crown-clothing",
"version": "0.1.0",
"private": true,
"dependencies": {
"firebase": "^6.3.5",
"node-sass": "^4.12.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^7.1.0",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1",
"react-stripe-checkout": "^2.6.3",
"redux": "^4.0.4",
"redux-logger": "^3.0.6",
"redux-persist": "^5.10.0",
"reselect": "^4.0.0"
},
"scripts": {
"start": "BROWSER=firefox react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
//error message
Creating an optimized production build...
remote: Failed to compile.
remote:
remote: ./src/components/directory/directory.styles.scss
remote: To import Sass files, you first need to install node-sass.
remote: Run `npm install node-sass` or `yarn add node-sass` inside your workspace.
remote:
remote:
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! crown-clothing#0.1.0 build: `react-scripts build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the crown-clothing#0.1.0 build script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR! /tmp/npmcache.7gDk8/_logs/2019-08-26T17_18_16_441Z-debug.log
remote:
remote: -----> Build failed
remote:
remote: We're sorry this build is failing! You can troubleshoot common issues here:
remote: https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:
remote: Some possible problems:
remote:
remote: - Node version not specified in package.json
remote: https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
remote:
remote: Love,
remote: Heroku
As you can see, the import of sass files is what causing the problem.

Answer 1

Weirdly enough, all I had to do was remove my node-modules folder, reinstall node-sass, and push to github before pushing to heroku. I can't say that they were all necessary but it is working, and didn't have to convert and css filetypes.

Answer 2

So after trying several things like clearing Heroku cache, re-installing node-models and re-deploy that didn't seem to work, I took the following steps:
change all of my .css files to .sass files.
install node-sass(which I already had) and then updating my git repository to the newest version of the app. that did the trick!