Laravel Mix incorrect compiled css location

Hi I have the following inwebpack.mix.js

mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css');

I have the following in (webpack.mix.js)

mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); Expand snippet after running npm run dev, my css and js files are compiled in the js directory and the css directory is not created.

it should be: /public/js/app.js and /public/css/app.css

but ends up being: /public/js/app.js and /public/js/app.css

even if i try to only add the css line in (webpack.mix.js)

it then creates mix.css

any reason why this does not work?

package.json

{ "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "@popperjs/core": "^2.11.2", "axios": "^0.21", "bootstrap": "^5.1.3", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "postcss": "^8.1.14", "resolve-url-loader": "^5.0.0", "sass": "^1.49.9", "sass-loader": "^12.6.0" } }