I'm new to Laravel and I'm trying to compile and upload my resources using Laravel Mix.
mix.js('resources/js/app.js','public/js')
.js('resources/js/users.js','public/js')
.sass('resources/sass/app.scss', 'public/css')
.css('resources/css/myStyle.css','public/css/myStyle.css')
These resources compiled successfully; in my users.js file, I have a JS script function that alerts some text on button click. In my Blade layout, I'm importing files like the following.
<!-- Scripts -->
<script src="{{ mix('js/users.js') }}"></script>
<!-- <script src="{{mix('/js/NotResourced.js')}}"></script> -->
<script src="{{ mix('js/app.js') }}"></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/myStyle.css') }}" rel="stylesheet">
I understand that Mix compiles the resources and puts them in the public directory so the browser can read them. But when I inspect my loaded files in the browser, the users.js is not among them. I've changed the order in which the files are loaded, but it didn't work. What I noticed is that in my Blade layout, I'm placing them in an HTML head tag. So I changed the position of the script file to before the body close tag position. However, when I inspect my loaded files on the browsers, the app.js file has existed, but the HTML head tag and users.js are not there.
Am I doing anything wrong here? And please, what's the proper way to get this done?
I've found what solved my issue, and the answer as follow :
Use scripts() method to minify any number of JavaScript files on webpack.mix.js file
like this
mix.scripts([
'public/js/admin.js',
'public/js/dashboard.js'
], 'public/js/all.js');
this is a proper way to compile your JS asset .
Related
In my Laravel 9 project that I am working on, I want to put a javascript file containing common functions in app.blade.php. As per How to include External CSS and JS file in Laravel 5.5, I placed the js file in public/js folder and included the following in app.blade.php
<!-- common js functions added by Ravi -->
<script src="{{ asset('js/common_js.js') }}" ></script>
However, this file is not getting included on the page, and the js functions included in the file are not available in console.
Could someone advise me how to include a js file so that it is available for all pages?
Thanks.
if you are using laravel vue do this
place th common_js.js file in resources folder than change this
//in webpack.mix.js
mix.js(["resources/js/app.js","resources/js/common_js.js"], "public/js")
and in app.blade.php use this
<script src="{{ mix('js/app.js') }}" defer></script>
than
npm run dev
run command
php artisan view:clear
you need to check the path rendered by asset() if it's not the correct path you can change the asset path from the .env file ASSET_URL
My problem is what i don't know how to connect js library leaflet.js( it downloaded and located in node_modules) on page with map in my laravel project. leaflet's site says that i should add
<link rel="stylesheet" href="/path/to/leaflet.css" />
<script src="/path/to/leaflet.js"></script>
and write path to library in these src's, but i don't know how to get it, i've tryed to do some operations with laravel mix but it didn't helped me(or i did something wrong, idk)
There are many ways to add the CSS and js file. In you downloaded a full zipped folder then out it to public folder with the name leaflet.Then Add the following code :
<link rel="stylesheet" href="{{ asset('leaflet/to/leaflet.css')}} " />
<script src="{{ asset('leaflet/to/leaflet.js') }} "></script>
Next, if you can be downloading through the following command:
npm install leaflet
Then add required within your resources/js/bootstrap.js file.
require("leaflet");
I'm gonna add a template to my laravel, I put template files in public folder and as always, I use the following command to load its files:
<link href="{{ asset('admin-panel') }}/dist/css/bootstrap-rtl.min.css">
<script src="{{ asset('admin-panel') }}/plugins/jquery/jquery.min.js"></script>
None of the files are loaded. In "view page source", the path of files is correct and files are opened But they do not work. What should I do?
At first I wanted to delete the question, but for some it may be interesting that the use of rel="stylesheet" in the link tag is mandatory in Laravel projects. Because this template runs well without being used in Laravel.
<link href="{{ asset('admin-panel') }}/dist/css/bootstrap-rtl.min.css">
Change to:
<link href="{{ asset('admin-panel') }}/dist/css/bootstrap-rtl.min.css" rel="stylesheet" />
I'm having a hard time getting my project to detect my less.js folder.
I'm using laravel 5.1, and I'm not sure where to put my less.js folder - since for Bootstrap and jQuery I just imported the src from a URL.
I currently have my less.js folder I downloaded under:
resources > assets > less > less.js folder I downloaded
I currently have my styles.less in my views while I try to figure this out.
My app.php head:
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
I'd appreciate if anyone could quickly let me know where to drop the folder!
Thanks!
edit:
Screenshots:
http://imgur.com/a/SDmE3/all
edit2:
http://imgur.com/a/8vQTm/all
The error in question:
Status 500 Type Script,
http://localhost:8000/reviewcourse/%3C!DOCTYPE%20html%3E%3Chtml%3E%20%20%20%20%3Chead%3E%20%20%20%20%20%20%20%20%3Cmeta%20charset=
Only assets published at public/ folder are available. So, you need to drop files there:
public/assets/less/download_folder/less.js
Then load it with:
<script src="{!! url('assets/less/download_folder/less.js') !!}" type="text/javascript"></script>
Another way/solution is to publish assets from /resources to public/ via Elixir:
elixir(function(mix) {
// location, origin
mix.copy('assets/less/download_folder/less.js', 'resources/assets/less/folder/less.js');
});
EDIT
I will assume that less.js is inside of public/assets/less/lessjs/dist/less.js. Then, load it as:
<script src="{!! url('assets/less/lessjs/dist/less.js') !!}" type="text/javascript"></script>
use this script at your html head
<script src="{!! asset('less/less.js') !!}" type="text/javascript"></script>
I have many .js files loaded in my index.html in the following format:
<script src="file.js"></script>
Is there an option to create an HTML file where I will source all my JS and CSS files and then include this HTML file in my index.html?
In order to load a HTML file, add a link tag with an import in the rel attribute and an href that contains a path to the HTML file. For example, if you want to load a HTML file called myImports.html into index.html:
index.html
<link rel="import" href="myImports.html" >
You can load any resource including scripts, stylesheets, and web fonts, into the imported HTML just like you do to regular HTML files:
myImports.html
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
Whereas doctype, html, head, body aren't required. HTML Imports will immediately load the imported document, resolve subresources and execute JavaScript, if any.
Instead of making on html file that include all js and css files. the more practical Solution is to merge all your javascript/CSS files into one file. then include that file into your html. Their are tools available that can help you to achieve this automatically e.g Gulp, YEOMAN etc.