Laravel-mix: Laravel Mix 4: Module not found: Error: Can't resolve 'sass-loader' in ...

[amcsi]

• Laravel Mix Version: 4.0.14
• Node Version: 10.13.0
• NPM Version: 6.7.0
• OS: Ubuntu 18.10

Description:

After an upgrade from Larvel Mix from 2 to 4, I'm getting errors in Webpack when I try to use SCSS in my .vue template files (using <style scoped lang="scss">).

Here is the commit of my open source project where I attempted to upgrade Mix: https://github.com/amcsi/lycee-overture/commit/8c29a35e354cbfbf99dca6f9697e2f1c45f0280b

Before the commit, it worked fine; after the commit, I got the errors.

Here is the output:

ERROR  Failed to compile with 9 errors11:28:30 AM

These relative modules were not found:

* ./App.vue?vue&type=style&index=0&lang=scss& in ./resources/js/App.vue
* ./Layout.vue?vue&type=style&index=0&lang=scss& in ./resources/js/pages/Layout.vue
* ./CostRules.vue?vue&type=style&index=0&id=5dc60f73&scoped=true&lang=scss& in ./resources/js/components/rules/CostRules.vue
* ./CardList.vue?vue&type=style&index=0&id=37f842e3&scoped=true&lang=scss& in ./resources/js/components/CardList.vue
* ./AnatomyRow.vue?vue&type=style&index=0&id=7f5962b6&scoped=true&lang=scss& in ./resources/js/components/rules/AnatomyRow.vue
* ./ImageWithAnatomy.vue?vue&type=style&index=0&id=2467c0cb&scoped=true&lang=scss& in ./resources/js/components/rules/ImageWithAnatomy.vue
* ./CardPrint.vue?vue&type=style&index=0&id=7f761d01&scoped=true&lang=scss& in ./resources/js/components/card/CardPrint.vue
* ./CardListItem.vue?vue&type=style&index=0&id=3ffb1b30&scoped=true&lang=scss& in ./resources/js/components/card/CardListItem.vue
* ./Paginator.vue?vue&type=style&index=0&id=b1d6f7c8&scoped=true&lang=scss& in ./resources/js/components/common/Paginator.vue
 9 assets

ERROR in ./resources/js/App.vue
Module not found: Error: Can't resolve 'sass-loader' in '/var/www/lycee-overture'
 @ ./resources/js/App.vue 4:0-64
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js

ERROR in ./resources/js/pages/Layout.vue
Module not found: Error: Can't resolve 'sass-loader' in '/var/www/lycee-overture'
 @ ./resources/js/pages/Layout.vue 4:0-67
 @ ./resources/js/router.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js

ERROR in ./resources/js/components/rules/CostRules.vue
Module not found: Error: Can't resolve 'sass-loader' in '/var/www/lycee-overture'
 @ ./resources/js/components/rules/CostRules.vue 4:0-94
 @ ./resources/js/router.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js

ERROR in ./resources/js/components/CardList.vue
Module not found: Error: Can't resolve 'sass-loader' in '/var/www/lycee-overture'
 @ ./resources/js/components/CardList.vue 4:0-93
 @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/pages/CardListPage.vue?vue&type=script&lang=js&
 @ ./resources/js/pages/CardListPage.vue?vue&type=script&lang=js&
 @ ./resources/js/pages/CardListPage.vue
 @ ./resources/js/router.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js

ERROR in ./resources/js/components/rules/AnatomyRow.vue
Module not found: Error: Can't resolve 'sass-loader' in '/var/www/lycee-overture'
 @ ./resources/js/components/rules/AnatomyRow.vue 4:0-95
 @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/rules/DeckAndCardRules.vue?vue&type=script&lang=js&
 @ ./resources/js/components/rules/DeckAndCardRules.vue?vue&type=script&lang=js&
 @ ./resources/js/components/rules/DeckAndCardRules.vue
 @ ./resources/js/router.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js

ERROR in ./resources/js/components/rules/ImageWithAnatomy.vue
Module not found: Error: Can't resolve 'sass-loader' in '/var/www/lycee-overture'
 @ ./resources/js/components/rules/ImageWithAnatomy.vue 4:0-101
 @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/rules/DeckAndCardRules.vue?vue&type=script&lang=js&
 @ ./resources/js/components/rules/DeckAndCardRules.vue?vue&type=script&lang=js&
 @ ./resources/js/components/rules/DeckAndCardRules.vue
 @ ./resources/js/router.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js

ERROR in ./resources/js/components/card/CardPrint.vue
Module not found: Error: Can't resolve 'sass-loader' in '/var/www/lycee-overture'
 @ ./resources/js/components/card/CardPrint.vue 4:0-94
 @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/CardListPrint.vue?vue&type=script&lang=js&
 @ ./resources/js/components/CardListPrint.vue?vue&type=script&lang=js&
 @ ./resources/js/components/CardListPrint.vue
 @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/pages/CardListPrintPage.vue?vue&type=script&lang=js&
 @ ./resources/js/pages/CardListPrintPage.vue?vue&type=script&lang=js&
 @ ./resources/js/pages/CardListPrintPage.vue
 @ ./resources/js/router.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js

ERROR in ./resources/js/components/card/CardListItem.vue
Module not found: Error: Can't resolve 'sass-loader' in '/var/www/lycee-overture'
 @ ./resources/js/components/card/CardListItem.vue 4:0-97
 @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/CardList.vue?vue&type=script&lang=js&
 @ ./resources/js/components/CardList.vue?vue&type=script&lang=js&
 @ ./resources/js/components/CardList.vue
 @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/pages/CardListPage.vue?vue&type=script&lang=js&
 @ ./resources/js/pages/CardListPage.vue?vue&type=script&lang=js&
 @ ./resources/js/pages/CardListPage.vue
 @ ./resources/js/router.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js

ERROR in ./resources/js/components/common/Paginator.vue
Module not found: Error: Can't resolve 'sass-loader' in '/var/www/lycee-overture'
 @ ./resources/js/components/common/Paginator.vue 4:0-94
 @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/CardList.vue?vue&type=script&lang=js&
 @ ./resources/js/components/CardList.vue?vue&type=script&lang=js&
 @ ./resources/js/components/CardList.vue
 @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/pages/CardListPage.vue?vue&type=script&lang=js&
 @ ./resources/js/pages/CardListPage.vue?vue&type=script&lang=js&
 @ ./resources/js/pages/CardListPage.vue
 @ ./resources/js/router.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js

Steps To Reproduce:

git clone [email protected]:amcsi/lycee-overture.git
cd lycee-overture
git checkout origin/mix-4-attempt
npm install
npm run prod

Expected:
Templates to compile file without errors.

Actual:
Errors as shown above.

[amcsi]

I was able to solve this by following this in the documentation: https://laravel-mix.com/docs/4.0/upgrade#vue-component-sass-preprocessing

npm install sass sass-loader

[marcelaerts]

Same issue here... Fix?

[amcsi]

@marcelaerts See my comment

[Amit833]

https://laravel-mix.com/docs/4.0/css-preprocessors