Steps Reproduced

Install Laravel Mix and SASS Dependencies

1
2

npm install laravel-mix sass sass-loader  --save-dev #install in current directory
npm install laravel-mix sass sass-loader  --global   #install in gloabal directory

Create Larvel Mix Configuration File

create a new file webpack.mix.js in the root of the project

1
2
3
4

const mix = require('laravel-mix');
mix.sass('scss/style.scss', 'css/style.css');
mix.options({processCssUrls: false});
if (!mix.inProduction()) { mix.sourceMaps(); }  // Enable source maps for development

Create Package.json File

create a new file package.json in the root of the project

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

{
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "dependencies": {
        "laravel-mix": "^6.0.49",
        "sass": "^1.84.0",
        "sass-loader": "^16.0.4"
    }
}

Compile SCSS File

compile or wathc compile scss file with different commands

1
2
3

npm run dev    # compile scss file once
npm run watch  # compile scss file and watch for changes
npm run prod   # compile scss file for production

Example Project Zip File

You may unzip and run npm install and then npm run dev to compile the scss file located in the scss folder: larvel-mix-sass-example.zip

Reference