I am using laravel 4 and Font-Awesome but when I put my library like is natural in: public/fonts/ it doesn't work, I actualy tryed with public/css/ but it doesn't works too I just get weird symbols. Can everyone please help me with this.
It works perfectly fine for me when including fontawesome in the head like this
{{ HTML::style('fonts/font-awesome.min.css') }}
You don't need to use public in the directories, as laravel assumes this to be the path and adds it automatically by default.
You could put: <link href="{{ asset('css/font-awesome.css')}}" rel="stylesheet">
Related
I have a small issue with my current configuration using Laravel for the backend, and Vue in the frontend, while my application is built using Laravel mix (6.0).
I am using the following simple mix configuration:
mix.js("resources/js/app.js", "public/js/app.js")
.vue()
.version()
.extract();
Everything works fine when running npm run watch, and when I launch the production build, I get as expected three files in my public folder (manifest.js, app.js and vendor.js). I included these three files in my app.blade.php file in the following way:
<script src="{{ asset(mix('js/manifest.js')) }}" defer></script>
<script src="{{ asset(mix('js/vendor.js')) }}" defer></script>
<script src="{{ asset(mix('js/app.js')) }}" defer></script>
The mix-manifest.json that comes out looks like this:
{
"/js/app.js": "/js/app.js?id=55e00bb7adfe7cc8d33c",
"/js/vendor.js": "/js/vendor.js?id=3cc2a9d83cabdff07b38",
"/js/manifest.js": "/js/manifest.js?id=7d6950016e73d672d079",
}
Most of the routes are working just fine with such a configuration.
However, the problem I am facing is a generic 404 error that shows up when trying to access particular routes having at least two levels, such as <my_website>/read/<post_id>. In this case, the browser tries to resolve something like <my_website>/read/js/app/1.js which obviously doesn't exist, as it should search for <my_website>/js/app/1.js instead.
Am I missing something obvious here? Is there any way to include a full path in the manifest file to avoid this, and making sure that the browser resolves the correct files? Or any other work around to make this work? Thank you!
You can force a base URL in the browser. This rewrites the URLs for you.
Use the <base> tag
See documentation of the base tag here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
Example:
<base href="https://www.example.com/">
I don't know, how much time I lost looking for solution for this issue. I wanted to use Chart.js in my Laravel project, so I followed instructions described here.
composer require fx3costa/laravelchartjs (runned)
Fx3costa\LaravelChartJs\Providers\ChartjsServiceProvider::class (added in the right place)
npm i chart.js (used to install chart.js)
In my controller and blade I used code from example 1 (Line Chart / Radar Chart)
After that the error appeared: Uncaught ReferenceError: Chart is not defined. Before and after that I was trying different solutions, but always something was wrong and I think this one should work for me. I probably missed something obvious, but very important.
Have you any ideas?
Should I add something to webpack.mix.js or bootstrap.js files after installing with npm?
EDIT:
If I put <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script> in my head section of blade, everything is working fine, but I'm using laravel-mix to use a locale file instead of link.
Chart.js must be loaded before content in order to use it in any Controller. I was loading my laravel-mix variables after HTML content (because it includes some big libralies like jQuery etc.), so that's why it couldn't work.
SOLUTION:
At the end of my document I still have my previous script
<script src="{{ asset('js/app.js') }}" ></script>
But now I made a new loadBefore.js file in resources/js directory with one line of code:
require('chart.js/dist/chart.js');
If there will be any reason to put there any other javascript code, it will be easy to put it there.
I also added this file to webpack.mix.js like this:
mix.js('resources/js/loadBefore.js', 'public/js').sourceMaps();
And of course at the end I added this script to the head section in my blade:
<script src="{{ asset('js/loadBefore.js') }}"></script>
Now everything is working and I'm using already existing in my Laravel files chart.js file. I don't know, someone knows an easier solution, so for now I'm accepting my answer, but I'm still open for suggestions.
why you just dont copy the content of
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
in a file at your local, for example: /public/js/chart.js
and load it in head
<script src="{{asset('js/chart.js')}}"></script>
I need to install Slim Cropper in Laravel (https://pqina.nl/slim/). I downloaded it and I have two files: slim.jquery.min and slim.min.css. How can I install it? I think I need to use the webpack.min.js, but I dont know how to use it. Thanks!
Well thats depends how you want do it. the quickest way could be simply, Add them to resources/layouts/app.blade.php in <head>. (assuming app.blade.php is your main layout file which you extending in all child views.) and use it like you would be using in normal html. Nothing Fancy. and for urls you can always use
<!-- Styles -->
<link href="{{ asset('css/slim.min.css') }}" rel="stylesheet">
<!-- script -->
<script src="{{ asset('js/slim.jquery.min.js') }}"></script>
which should load them from public/css and public/js folders.
read more about asset function here
https://laravel.com/docs/7.x/helpers#method-asset
Its always nice to use Laravel elixir feature. But I have some basic question. Firstly
when we run gulp command, it concatenates all the css and js files. But I think I dont need, for example, datatables.css and datatables.js/boostrap-wysihtml for all of my pages. how to tackle this situation?
Secondly Lets review this code:
elixir(function(mix) {
mix.styles([
"bootstrap.min.css",
"owl.carousel.css",
"animate.css",
"style.css",
"datepicker.css"
]);
mix.scripts([
"jquery.min.js",
"bootstrap.min.js",
"bootstrap-datepicker.js",
"typed.min.js",
"wow.min.js",
"owl.carousel.min.js",
"home.js",
"side-navigation.js",
"script.js"
]);
mix.version(["css/all.css","js/all.js"]);
});
in blade:
<link rel="stylesheet" href="{{ url(elixir('css/all.css')) }}">
what is the use of this elixir() function, when we are creating all.js and all.css file that has everything concatenated inside it?
You want to use the elixir function in the blade template because it will automatically use the rev.manifest file to resolve which versioned file(s) to use. The docs have more info. As far as not needing all scripts on all pages, there are a few different ways to pull it off. You can create a task that generates just generates one bundle - perhaps scripts needed everywhere - and another bundle handling the rest. I'd advise you to research that to see what works best for you.
TL;DR: What is the correct way to link to a stylesheet in Laravel 5?
Background:
I'm using the dev version of Laravel 4.3 (5) because I want to use Socialite, and it makes sense to develop with that from the start. I am having a problem getting templates transferred from 4.2
I've moved my blade layout files to the new directory structure (resources/templates) and placed my CSS in the public/css/ folder.
When I load my route /test/ all I get is "Whoops, looks like something went wrong."
For testing purposes I've removed all blade layout syntax from my layouts - the raw HTML works, but there is no styling (as there is no linked stylesheet). That tells me the routes, views and controllers work.
The problem:
In my layouts, if I remove the following, the layouts work:
{{ HTML::style('css/bootstrap.min.css') }}
{{ HTML::style('css/style.css') }}
Question:
What is the correct location and syntax for Blade Stylesheet inclusion in Laravel 5 and what I should be using instead?
The HtmlBuilder has been removed from Laravel's core, so HTML::style() is no longer available.
If you want to use it in laravel 5, add the following to your composer.json file, under the require key:
"laravelcollective/html": "~5.0"
Also note, since HTML::style() returns HTML code, you don't want it escaped. Use the raw brackets:
{!! HTML::style('css/style.css') !!}
Adding to #joseph's answer, for the users preferring not to switch to the new syntax, you can use
Blade::setRawTags('{{', '}}');
and continue with the old syntax . this can be set almost anywhere, but a better choice would be a service provider, say legacy service provide for l4 . you can find further discussion on this at laracasts, where you can find taylor otwells thoughts on this .
If you want to use plain HTML then use like this-
<link rel="stylesheet" href="/css/folder/style.css">