This is my gulpfile.js
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.less([
'style.less'
], 'public/css/style.css')
.styles([
'reset.css',
'font-awesome.min.css',
'style.css'
], 'public/css/app.css', 'public/css')
.scripts(['jquery-1.12.0.min.js', 'main.js'], 'public/js/app.js', 'resources/assets/scripts')
.version(['css/app.css', 'js/app.js']);
});
As result I get files
public/build/app-2a14246111.css
public/build/app-7790e07dfb.js
public/build/rev-manifest.json
but when I try to add css and js files to layout
<link rel="stylesheet" href="{{ elixir("css/app.css") }}">
<script src="{{ elixir("js/app.js") }}"></script>
I get
<link rel="stylesheet" href="/build/css/app-2a14246111.css">
<script src="/build/js/app-7790e07dfb.js"></script>
and browser can't find them because it tries to find
http://localhost:8080/build/css/app-2a14246111.css
http://localhost:8080/build/js/app-7790e07dfb.js
and project folder name and public folder are missed somehow in paths. How to fix it?
Actually I see, I can add dot in paths like
<link rel="stylesheet" href=".{{ elixir("css/app.css") }}">
<script src=".{{ elixir("js/app.js") }}"></script>
and then all will work, but I don't like this kind of fix.
That's because you're running the Laravel project on localhost. When you deploy the project to a server, the problem resolves itself (assuming it's configured correctly).
If you're using Apache, you can add a Virtual Host configuration so that instead of http://localhost:8080/laravel/public you can use something like http://domain-name.app:
<VirtualHost *:80>
DocumentRoot "C:\Users\username\path\to\laravel\public"
ServerName domain-name.app
</VirtualHost>
And then in your hosts file add:
127.0.0.1 domain-name.app
This way, you can link to absolute paths in your HTML like /css/somefile.css instead of ./css/somefile.css.
Checkout Homestead, from Laravel, it helps to avoid a lot of pain in the ass.
FWIW... you can also wrap the elixir tags with URL::asset like this:
<link href="{{ URL::asset(elixir('css/app.css')) }}" rel="stylesheet">
That solved my issue and still allowed me to run on port 8888.
Related
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>
I'm doing a little website for me with Laravel 8.0.
Inside home.blade.php, I have this : <link rel="stylesheet" href="{{ asset('css/header.css') }}">
But when I go to my browser, no css in my page. Inside the developper tools, it says <link rel="stylesheet" href="http://localhost/css/header_site.css">.
I have all my css inside the public/assets/css folder.
I also used the VirtualHost inside httpd-vhosts.conf where I do DocumentRoot "C:/xampp/htdocs/my-project/public".
Cordially
Try configuring the assets url in the .env file. ASSET_URL=http://localhost/assets/. Then do {{asset('css/header.css')}}
My CSS and JS file work fine on localhost but when up to host it not working.
I use laravel 5.4. I tried a lot of ways but still failed.
enter image description here
My embedded CSS and JS code
enter image description here
UPDATE: Thanks all i have fixed my problems follow this:
1. change http://localhost to https://localhost at APP_URL line in .env file
2. add \URL::forceScheme('https') to AppServiceProvider.php file in boot() function
3. the last is include {{asset('--link_on_href--')}} for each CSS and JS embeded on index.php
Use the asset() helper to include assets in your view. This will automatically generate the appropriate URL for the included files based on you APP_URL in your .env file.
For CSS,
<link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" >
Or
<link href="{{ URL::asset('css/app.css') }}" rel="stylesheet" type="text/css" >
For JS,
<script type="text/javascript" src="{{ asset('js/custom.js') }}"></script>
Or
<script type="text/javascript" src="{{ URL::asset('js/custom.js') }}"></script>
For Images and other such assets,
{{ asset('img/photo.jpg'); }}
Link to the Docs
I'm a new in Laravel and am trying to use the mix.version() in the Gulpfile.js in Laravel 5.3 for cache busting.
this is my gulpfile.js:
elixir(function (mix){
mix.less('custom.less');
mix.version('public/css/custom.css');
});
When running gulp command in my terminal, my less is compiled and versioned correctly, but when I try to include the the following line my view file, it breaks my view:
<link rel="stylesheet" type="text/css" href="{{ elixir('/css/custom.css) }}">
screenshot of my error
Is there a specific include or something I need to call in my view file to ensure the above line of code actually works? If I remove the above elixir line in my view code and hard code link my css file, then it works, but I can't leave it like that as I need versioning for cache busting.
Thanks so much, I have tried the documentation, but not examples exist of how to include the code in the view file.
There is a ' missing
<link rel="stylesheet" type="text/css" href="{{ elixir('/css/custom.css) }}">
should be
<link rel="stylesheet" type="text/css" href="{{ elixir('/css/custom.css') }}">
Regarding the question title
{{ elixir('/css/custom.css) }}
is causing the error not the mix.version()
I am using laravel and nodejs on WAMP Server on Windows 10. Now using the elixir mix function
elixir(function(mix) {
mix.sass('app.scss');
mix.version('css/app.css');
});
which is generating a version file for my app.css and placing it to
public\build\css\app-d37b3a9d94.css
now when I add the link of the css file by using elixir function, like following
<link rel="stylesheet" type="text/css" href="{{ elixir('css/app.css') }}">
it generates a path like
/build/css/app-d37b3a9d94.css
but with this, the css do not work on the resulted page. I troubleshoot the problem and found that it do not work due to the first slash in the path. when I manually add the above css file path (which elixir generated) by removing the first slash, it works. like the following
build/css/app-d37b3a9d94.css
I am not sure how to fix this problem where elixir generated path to css file work. Looks like elixir adding an extra slash before the path but I have checked the code on several places for laravel and the code works with first slash in path. Not sure why it is not working for me.
One more thing I have noticed, even if I remove mix.version('css/app.css'); from gulpfile.js (which generate version file) and run gulp command to update css/app.css, and use <link rel="stylesheet" type="text/css" href="{{ elixir('css/app.css') }}"> it still refer to the version file rather than referring to css/app.css Is it a correct behavior?
Try to use it this way:
<link rel="stylesheet" type="text/css" href="{{ asset(elixir('css/app.css')) }}">