CODEWITHSUNDEEP
phplaravelsassrouteslaravel-mix
Ewinnn
Ewinnn

Reputation: 337

Laravel 5.4 reference to Mix CSS file

I'm trying to set up a SASS to CSS compiler via Mix (previously Elixer) in Laravel 5.4 (using https://laravel.com/docs/5.4/mix). Everything is working fine, it compiles and I can set up a watcher via npm, but referencing it via the views/layout/app.blade.php file, like:

 <link rel="stylesheet" href="{{ mix('css/app.css') }}">

doesn't work. In my browser, it is shown of course as:

<link rel="stylesheet" href="/css/app.css">

It is the wrong path. It should be referencing to http://localhost/website/public/css/app.css, but changing anything in the Mix code above, generates a Laravel error.

Unable to locate Mix file: /website/public/css/app.css. 
Please check your webpack.mix.js output paths and try again.

What am I doing wrong? Do I need to set a base path somewhere, is my .htaccess wrong, or..? Thank you for any answers.

Upvotes: 1

Views: 2905

Answers (2)

Yernar
Yernar

Reputation: 1

in webpack.mix.js file configure that file u need like this mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css', []); after do command npm run watch for mix .

And then u can add your css file anywhere u want like <link rel="stylesheet" href="{{ asset('css/app.css') }}"/>

Upvotes: 0

Paweł Dymek
Paweł Dymek

Reputation: 96

The path generated by the mix() helper is correct. Your domain should point to directly to "public" directory. Everything above "public" directory should not be accessible via HTTP (it's not safe).

So you need to create new domain (e.g. project.local) and point it to Laravel's public directory (e.g. /home/user/website/public/) or just change default root path in your webserver configuration (DocumentRoot if Apache). Then the URL http://project.local/css/app.css will work.

Upvotes: 4

Related Questions