How to use SASS in Laravel 8?

Question

I want to use SASS in my project in Laravel 8. I have put my scss code under resources/sass/app.scss and added following code to webpack.mix.js:

const mix = require('laravel-mix');

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

However, when I run npm run watch command I get the following error:

> watch
> mix watch

node:internal/crypto/hash:105
    throw new ERR_INVALID_ARG_TYPE(
    ^

TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined
    at new NodeError (node:internal/errors:278:15)
    at Hash.update (node:internal/crypto/hash:105:11)
    at BulkUpdateDecorator.update (/Users/elo/sites/laravel/node_modules/webpack/lib/util/createHash.js:49:14)
    at NormalModule.updateHash (/Users/elo/sites/laravel/node_modules/webpack/lib/NormalModule.js:1115:8)
    at Compilation.createModuleHashes (/Users/elo/sites/laravel/node_modules/webpack/lib/Compilation.js:2822:12)
    at /Users/elo/sites/laravel/node_modules/webpack/lib/Compilation.js:2155:11
    at Hook.eval [as callAsync] (eval at create (/Users/elo/sites/laravel/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/elo/sites/laravel/node_modules/tapable/lib/Hook.js:18:14)
    at /Users/elo/sites/laravel/node_modules/webpack/lib/Compilation.js:2115:36
    at Hook.eval [as callAsync] (eval at create (/Users/elo/sites/laravel/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1) {
  code: 'ERR_INVALID_ARG_TYPE'
}
npm ERR! code 1
npm ERR! path /Users/elo/sites/laravel
npm ERR! command failed
npm ERR! command sh -c webpack --progress --watch '--config=node_modules/laravel-mix/setup/webpack.config.js'

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/leo/.npm/_logs/2021-01-26T14_34_47_236Z-debug.log
npm ERR! code 1
npm ERR! path /Users/elo/sites/laravel
npm ERR! command failed
npm ERR! command sh -c mix watch

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/elo/.npm/_logs/2021-01-26T14_34_47_308Z-debug.log

I use npm npm 7.0.8 and node 15.3.0

Samuel Aiala Ferreira · Accepted Answer · 2021-01-26 14:52:06Z

1

What works for me

mix.js("resources/assets/site/js/app.js", "public/assets/site/js")
    .sass("resources/assets/site/sass/app.scss", "public/assets/site/css").options({
    postCss: [require("autoprefixer"), require("postcss-rtl")], })

answered Jan 26, 2021 at 14:52

Samuel Aiala Ferreira

7146 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yevgeniy Afanasyev Over a year ago

It works for me to combine tailwindcss and font-awesome/scss, that is amazing. Thank you

Collectives™ on Stack Overflow

How to use SASS in Laravel 8?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related