CODEWITHSUNDEEP
laravelnpmsasslaravel-5.4
Advaith
Advaith

Reputation: 2580

Unexpected character '@'

I recently switched to laravel 5.4.

When i tried to run npm run watch I get the following error --

Error

I didn't even done any edit in my sass file.
Sass File looks like this ---

// 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";

How can i solve this?

My package.json file looks like this -- 

{
    "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",
        "less": "^2.7.2",
        "less-loader": "^2.2.3",
        "lodash": "^4.16.2",
        "vue": "^2.0.1"
    }
}

Upvotes: 1

Views: 1090

Answers (2)

Denis Priebe
Denis Priebe

Reputation: 2855

This is a current issue with Laravel Mix. There is an open issue discussion on GitHub for this.

https://github.com/JeffreyWay/laravel-mix/issues/200

According to the some of the users you could use Laravel Mix version 0.5.8 and your problem would go away. Edit your package.json file to have "laravel-mix": "0.5.8"

I recommend using this until the issue is resolved.

This seems to be an issue for windows users.

Edit

As of this moment the issues seems to have been resolved. You need to pull in the latest version of Mix and also add "vue-loader": "10.1.0" to your package.json file.

Upvotes: 1

EddyTheDove
EddyTheDove

Reputation: 13259

Make sure you have sass installed on your computer. If you don't have it installed, instructions are here: http://sass-lang.com/install.

Then you need to make sure sass is also installed in the project. Reading your package.json it seems you have less instead.

Run: npm i --save-dev sass

By default your project comes with less installed. Locate the file webpack.mix.js from the root folder. find the following line

mix.less('resources/assets/less/app.less', 'public/css')

.less('resources/assets/less/admin.less', 'public/css');

And change it to

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

.sass('resources/assets/sass/admin.sass', 'public/css/admin');

If you don't see those exact same lines, find something similar.

Upvotes: 1

Related Questions