Tachi's avatar
Level 1

Mix not processing scss files

I have freshly installed node, and laravel 5.4.5. Then i ran npm install. After that i'm trying to run npm run dev, and I have next error:

ERROR  Failed to compile with 1 errors

 error  in ./resources/assets/sass/app.scss

Module parse failed: C:\OpenServer\domains\triton-barns\resources\assets\sass\app.scss Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .app-ticket{
|   overflow:hidden;
|

 @ multi ./mix-entry.js ./resources/assets/sass/app.scss
                                                                                                                                                                                                                                            Asset      Size  Chunks             Chunk Names
           mix.js   2.95 kB       0  [emitted]  mix
mix-manifest.json  24 bytes          [emitted]

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
npm ERR! node v6.9.4
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! @ dev: `node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2

But, If i run : node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

I get next error

ERROR  Failed to compile with 1 errors

 error  in ./resources/assets/sass/app.scss

Module parse failed: \resources\assets\sass\app.scss Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .app-ticket{
|   overflow:hidden;
|

 @ multi ./mix-entry.js ./resources/assets/sass/app.scss

            Asset      Size  Chunks             Chunk Names
           mix.js   2.95 kB       0  [emitted]  mix
mix-manifest.json  24 bytes          [emitted]

Here is my webpack.mix.js

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

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

I've googled for 3 hours already, but there is no clear answer jor the problem.

My package.json

{
  "private": true,
  "scripts": {
    "dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.2",
    "bootstrap-sass": "^3.3.7",
    "jquery": "^3.1.0",
    "laravel-mix": "^0.5.0",
    "lodash": "^4.16.2",
    "vue": "^2.0.1"
  }
}
0 likes
6 replies
ActiveMonkey's avatar

Same here - fresh install of laravel 5.4.3. No changes made to any of the files.

node -v = 6.9.4

npm -v = 4.2.0

Laragon on windows - installed with: npm install --no-bin-links. Running npm run dev generates the following error:

 ERROR  Failed to compile with 1 errors
 error  in ./resources/assets/sass/app.scss

Module parse failed: D:\----\----\resources\assets\sass\app.scss Unexpected character '@' (3:0)
You may need an appropriate loader to handle this file type.

And this is my app.scss file (out of the box, no changes).


// Fonts
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);

// Variables
@import "variables";

// Bootstrap
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

Additional information: when I exclude the parsing of the sass part, the js part is processed normally and no errors are thrown.

sebastiangperez's avatar

Same here , i just run npm run watch and i got the same error , the @ symbol.

ActiveMonkey's avatar

Just found the answer:

  1. run npm cache clean
  2. open node_modules/laravel-mix/setup/webpack.config.js, and find this line..

test: new RegExp(toCompile.src.path),

and update it to:

test: new RegExp(toCompile.src.file),

Then: run npm update

2 likes
smitpatelx's avatar

You basically need these dependencies and also make sure some dependencies must not be devDependencies

"dependencies": {
    "@fortawesome/fontawesome-free": "^5.11.2",
    "axios": "^0.19",
    "cross-env": "^5.1",
    "laravel-mix": "^4.0.7",
    "lodash": "^4.17.13",
    "popper.js": "^1.12",
    "resolve-url-loader": "2.3.1",
    "sass": "^1.20.1",
    "sass-loader": "7.*",
    "vue": "^2.5.17",
    "vue-template-compiler": "^2.6.10"
  },
  "devDependencies": {
    "tailwindcss": "^1.1.2",
    "vue2-transitions": "^0.3.0"
  }

Please or to participate in this conversation.