• On Ubuntu 20.04 Server

• Installed node 16.13.0 using: nvm install 16.13.0

• Installed npm Version 8.3.0

• Installed Laravel Framework 8.76.2

• New site: laravel new testsite

• Use scss instead on css

• mv resources/css/app.css resources/css/app.scss

• npm install sass

• npm install sass-loader

• Change PostCss line in webpack.mix.js

.postCss('resources/css/app.scss', 'public/css', [

• npm install

  Ok, so this is a typical rollout I do on many machines. npm throws the following error when using:

  npm run watch

`> watch

mix watch

✖ Mix Compiled with some errors in 1.37s

ERROR in ./resources/css/app.scss Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): SyntaxError

(1:1) /home/.../sites/testsite/resources/css/app.scss Unknown word

1 | import api from "!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"; | ^ 2 | import content from "!!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[7].oneOf[1].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[7].oneOf[1].use[2]!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[7].oneOf[1].use[3]!./app.scss"; 3 |

at processResult (/home/.../sites/testsite/node_modules/webpack/lib/NormalModule.js:751:19)
at /home/.../sites/testsite/node_modules/webpack/lib/NormalModule.js:853:5
at /home/.../sites/testsite/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /home/.../sites/testsite/node_modules/loader-runner/lib/LoaderRunner.js:251:18
at context.callback (/home/.../sites/testsite/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (/home/.../sites/testsite/node_modules/postcss-loader/dist/index.js:140:7)

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details) webpack compiled with 2 errors`