This is the line I load my assets:
<script src="{{ asset('assets') }}/js/vendors/jquery-3.2.1.min.js"></script>
And here code from web.php for route settings:
Route::resource('masuk', 'Backend\ParkirInController');
It works fine with this code, but when I using a prefix like here:
Route::group(['prefix'=>'parkir'], function (){
Route::resource('masuk', 'Backend\ParkirInController');
});
The assets are not loaded and show an error like
require.min.js:5 GET http://localhost:8000/parkir/assets/js/vendors/jquery-3.2.1.min.js net::ERR_ABORTED 404 (Not Found)
So the name of prefix parkir is included to the assets URL.
Try changing this line:
<script src="{{ asset('assets') }}/js/vendors/jquery-3.2.1.min.js"></script>
to
<script src="{{ asset('/assets/js/vendors/jquery-3.2.1.min.js') }}"></script>
Here, you have just added a / before the assets so that the url starts from root instead of relative current path.
Finally I can solve it! This is because the dashboard.js from template is using require.js to set the required assets with a static path.
It look like this
Static path of assets
After I added / at the beginning of line like what #Imran said. It works fine
Related
i just have a complete clear blade template file which manually add the app.js file in local server machine . the error i faced is GET http://127.0.0.1:8000/js/app.js net::ERR_ABORTED 404 (Not Found)
here is the code i used <script src="{{ asset('js/app.js') }}" defer></script> to blade file
whats wrong ?
could someone help me please ?
you have to configure your webpack.mix.js or vite.config.js then do npm run. After that public/js files will be created.
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 am developing a Web Application. I am using Laravel 5.3. I also want to use SASS. This is my first time of using SASS. I learned from this tutorial- http://blog.teamtreehouse.com/the-absolute-beginners-guide-to-sass. Now I am trying to integrate SASS with Laravel. I just started building project. So I decided to use this one - https://github.com/panique/laravel-sass.
I included this in composer.json
"require-dev": {
"panique/laravel-sass": "1.0"
}
I added this line in public/index.php
SassCompiler::run("scss/", "css/");
So my index.php in public folder look like this
Then I run "update composer" command in terminal. Installation worked well in terminal.
So now I need to try on SASS and make sure it is working or not.
So I created two file in public folder.
public/css/style.css
and
public/scss/style.scss
Then I created a view, hello.blade.php. This is the html.
<!DOCTYPE html>
<html>
<head>
<title>SASS</title>
<link rel="stylesheet" type="text/css" href="{{ url('css/style.css') }}">
</head>
<body>
<h1 class="heading">Let's sass. Just change color.</h1>
</body>
</html>
Then I added this lines in public/scss/style.scss
$red: #FF4848
.heading
color:$red
Then I configure Laravel route like this.
Route::get('hello', function () {
return View('hello');
});
When I access the URL from browser, it is giving me this error.
Fatal error: Uncaught Exception: parse error: failed at $color : red
line: 1 in
C:\xampp\htdocs\whatsuppathein\vendor\leafo\scssphp\scss.inc.php:4108
Stack trace: #0
C:\xampp\htdocs\whatsuppathein\vendor\leafo\scssphp\scss.inc.php(2761):
scss_parser->throwParseError() #1
C:\xampp\htdocs\whatsuppathein\vendor\leafo\scssphp\scss.inc.php(121):
scss_parser->parse('$color : red\r\n\r...') #2
C:\xampp\htdocs\whatsuppathein\vendor\panique\laravel-sass\sass-compiler.php(53):
scssc->compile('$color : red\r\n\r...') #3
C:\xampp\htdocs\whatsuppathein\public\index.php(50):
SassCompiler::run('scss/', 'css/') #4 {main} thrown in
C:\xampp\htdocs\whatsuppathein\vendor\leafo\scssphp\scss.inc.php on
line 4108
What is wrong with my code?
When I replace this line
SassCompiler::run("scss/", "css/");
with this
SassCompiler::run("public/scss/", "public/css/");
in public/index.php, it is not throwing error. But not changing any CSS. Not changing the font color.
Laravel uses gulp to transpile dependencies and it comes built it when you do npm install from your project direcftory.
Open up your resources/scss/app.scss file and you can perform #import statments to your own files.
The gulp.js file in your project's root directory contains the sass transpiling.
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')) }}">
So I have a module setup and working, and have setup an asset folder within it containing a css and js folder. My files are in there, but when I try linking to them like this:
<script type="text/javascript" src=/application/modules/badge_progress/assets/js/jquery.jcarousel.js"></script>
Or this:
<script type="text/javascript" src=<?php echo base_url(); ?>/application/modules/badge_progress/assets/js/jquery.jcarousel.js"></script>
They don't work. What is the proper way to link to the files?
You have a problem with your quotation marks. The src value starts with no quotation mark but ends with one. Try
<script type="text/javascript" src="<?php echo base_url();?>/application/modules/badge_progress/assets/js/jquery.jcarousel.js"></script>`
You cant access directly from /application folder from web browser.
Move badge_progress folder with same directory with application and try this
<script type="text/javascript" src="<? echo base_url();?>badge_progress/assets/js/jquery.jcarousel.js"></script>
keep your js and css file in root folder and try and check in firebug js file and css file is loading or not and what path is created for that file and then fix it.