Could you tell me how to link css and js file in laravel according to my file structure
I wanna link app.css and app.js into museum.blade.php (inside portfolio)
I have try something like this: <link rel="stylesheet" href="{{ asset('resources/css/app.css')}}">, but it did not work
here is my file structure
please help me, thank you so much
I have try something like this: , but it did not work
This happens because resources folder are not to be consumed "public", the folder that would be consumed by "public" is a public folder, you need to compile them from resource to public first. Laravel has great documentation about it at Laravel Mix
To fix your problem, you need to find a file on your project directory called "webpack.mix.js"
and put this mix code on it.
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/museum.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
and then you can run npm run dev at your command line to compile the assets.
it will compile your targeted resources on webpack mix to public.
After that, on the head of your museum.blade.php, you can call it like
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}" defer></script>
Related
I am very new to the laravel , i have done login blade file and i included css files but it's not loading css files ,can you please help me where did i mistake ..?
users.blade.php
<link rel="stylesheet" href="{{ asset('resources/css/user.css') }}">
You're trying to access the resources folder, which is not exposed to the public, you'll have to compile your css so it lives in the public folder, which is the folder that anyone(including your frontend) can access using https://your-url.tld/{public file path}. There are 2 ways in which you can have your user.css file available for to your frontend:
One:
You can import your user.css file to the existing resources/css/app.css file:
/* app.css file */
#import "../path/to/user.css";
Two:
You can compile user.css to a separate file, in case you want to use that file specifically on another layout or blade file instead of mixing it globally with the app.css file:
// webpack.mix.js file
mix.js('...')
.css('resources/css/user.css', 'public/css');
Then in your layout file:
// app.blade.php file
<link rel="stylesheet" href="{{ asset('css/user.css') }}">
Hope it helps.
after npm run prod for production in laravel, do I need to upload mix.manifest.json along app.css and app.js to shared hot or not?
the mix.manifest.json file will change to :
{
"/js/app.js": "/js/app.js?id=b891664151c01b268197",
"/css/app.css": "/css/app.css?id=4b5a5b36ae9495db0146"
}
but no such files in public, uploading just app.css and app.js is enough?
and is my code correct for versioning in production and development?
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.version();
if (mix.inProduction()) {
mix.version();
}
You will also have to copy mix.manifest.json to your public folder along with app.css and app.js. Mix.manifest.json is where Laravel looks to get the version number. You will also have to change how you grab your css and js files in your app.blade.php so it looks like this:
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
I have this folder structure and I want to access the files inside resources. So im doing
<link href="{{ asset('sass/app.scss') }}" rel="stylesheet" />
<script src="{{ asset('js/app.js') }}" type="text/javascript"></script>
but it says not found so i thought i need to add resources so i tried
<link href="{{ asset('resources/sass/app.scss') }}" rel="stylesheet" />
<script src="{{ asset('resources/js/app.js') }}" type="text/javascript"></script>
Still i am getting status 404 for both files.
UPDATE:
I run this command:
let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
tl;dr: You need to either run npm run dev, npm run watch or npm run prod to compile your assets to "usable" js/css files.
You should never link to assets in your resources folder, they will not be available. Anything inside the public folder can be linked to.
On your local/dev environment run npm run dev to compile your assets to the public folder (see webpack.mix.js in your project's root folder to know exactly what happens). If you happen to make a lot of changes you can run npm run watch instead so you don't have to type npm run dev after every change - your assets will automatically be compiled if changes are detected.
Using the vanilla webpack.mix.js npm run dev will compile resources/assets/js/app.js to the public/js folder and resources/assets/sass/app.scss to the public/css folder, leaving you with public/js/app.js and public/css/app.css - those are the files you should link to in your .blade file:
<link href="{{ asset('css/app.css') }}" rel="stylesheet" />
<script src="{{ asset('js/app.js') }}" type="text/javascript"></script>
You can read more on the "Compiling Assets (Mix)" documentation link:
https://laravel.com/docs/7.x/mix
I use laravel 5.6, vue.js, apache.
Erro:
GET https://alphi.com.br/js/app.js net::ERR_ABORTED 404
Did you upload the file in your server? yes
Does the build provide a minified version with a hash added? no
The app.js is not recognized in my frontend application.
What I tried and did not work:
folder permission is correct
mix did not advance anything
I changed the folder, but error persist.
Configuration webpack.mix.js:
let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.version();
Can anybody help me. I searched all over the internet and found nothing to help me.
Thank you
I found the solution for this thread
instead of using this
<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
try this
<script src="{{ asset( mix('js/app.js')) }}" type="text/javascript"></script>
-add the asset function
I hope it helps
If you use .version() in Laravel-Mix, you should use in your blade
<script src="{{ mix('js/app.js') }}"></script>
..because it's has a versioned name instead. Same for stylesheet path:
{{ mix ('css/app.css') }}
Docs: https://laravel.com/docs/5.8/mix#versioning-and-cache-busting
I get an Error Message with laravel 5, which I don't understand.
Next exception 'ErrorException' with message 'File build/css/all.css not
defined in asset manifest.
I haven't installed any asset pipeline or something. Just used elixir to compile, minify and version the scss-file to all.css and included it into the master view with <link rel="stylesheet" href="{{ elixir("css/all.css") }}">
What is this 'asset manifest' and how to fix this error?`
The question is of course what you want to achieve.
If you simply put all.css file into the public/css directory and you want to display this file, you can use:
<link rel="stylesheet" href="{{ asset('css/all.css') }}" />
However if you plan to modify this file and you don't want to have caching issues, you can put this all.css file again into public/css then put into gulpfile.js:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.version('public/css/all.css');
});
Now you'll need to run:
gulp
in your terminal, and now you can use
<link rel="stylesheet" href="{{ elixir('css/all.css') }}" />
as you previously did in your HTML.
It will create public/build/ folder with rev-manifest.json (this file is missing in your case).
I would recommend you to watch Managing assets Laracasts episode to understand it a bit better.
Same issue here!! I solve it by creating production version of css. I update gulefile.js as bellow,
elixir(function(mix) {
mix.sass('app.scss').version('css/app.css').browserify('app.js');
});
Then run following command which will create rev-manifest.json file in public/build directory.
gulp --production
Good luck!!