I am new to laravel homestead. I am using a windows 10 for my learning and able to run npm watch-poll. The app.scss is compiled successfully and the app.css file is updated in the public directory but, it wouldn't display in my browser. I have included the CSS script in my blade template. Only when I restart my machine then the css is displayed. Any one can help please.
I do appreciate.
This is how i solved this problem in my own project:
delete your link tag containing href="app.css"
save file
paste the link tag again
save file
If the above doesn't work, try pressing ctrl+f5 to clear browser cache.
How to disable browser cache on chrome:
https://www.technipages.com/google-chrome-how-to-completely-disable-cache
Related
I have made a wordpress theme with understrap and I have uploaded on a webhost and it works fine.
The issue is that I wanted to make some changes so I edit my scss file localy and when I uploaded it the changes weren't applied. Am I suppose to upload any other file in order to work?
Thank you in advance
I don't know if this will help anyone but in order to update website's scss on host you simply copy the css file which usually is in the css folder and you just upload it to the same folder.
The SCSS needs to be compiled into - and replace the existing - CSS files enqueued by your theme. To do this you can either, install a plugin that does that, or have it done by setting up css pre-processing in your local IDE/environment.
clear cache of your browser and close recent tab and try again. it just browser runnung with previous cache.
I'm new with Laravel's framework, so correct me if i'm mistaken.
I have set up some templates with some assets (css and js) in its corresponding folder:
SASS and JS goes inside resources/sass and resources/js respectively, which then gets compiled into public/css and public/js
Views go into resources/views, and then i have set up some routes inside routes/web.php
If you want me to add some more information i can for sure add it.
Image of console network debugging
Please, ignore images time load as I dont care the loading of them cause they load after DOM.
What I'm asking here is: why is every .css file or .js file taking more than a second to load?
Solution found
Seems like xDebug was causing strong loads in my page, commenting it fixed it.
Developers Recently i am working on a vue js Website, and everything is working fine on Development but when i build the code using npm run build , the production build gets successfully build but when i try to open the index.html file inside dist directory the file gets opened in Browser but a Blank white page gets Displayed.
You need to start your server, not open the file directly.
Because Vue builds files and connects JS and CSS like it would be on the server.
And now, when you are opening the file, it can't find JS/CSS.
How do you want to deploy your app? I think the following post can help you:
How to deploy vue app
Please check if you have a vue.config.js file and if the configuration is correct according to your project setup.
I am new to VueJS. I am following one of the YouTube tutorial Let's Build a Multi-Purpose Laravel + Vue Application by Code Inspire
This is his github package.
https://github.com/Hujjat/laravStart
I notice. When I logout and login again, it will redirect to .js file.
for my case:-
http://laravel-vuejs.test/js/popper.js.map
and I clone his project. I tried with inspect, I login and logout and login. It will redirect to
http://laravstart.test/js/laravel-vue-pagination.common.js.map
It will show 404 error. I have every time remove the /js/xxxx.js.map then only back to normal.
Both of my project, when I run inspect. I notice have the Chrome warning.
DevTools failed to parse SourceMap: http://laravstart.test/js/laravel-vue-pagination.common.js.map
DevTools failed to parse SourceMap: http://laravel-vuejs.test/js/laravel-js/popper.js.map
IMPORTANT NOTE It only happen when I open the chrome inspect windows. If I close it, it will back to normal means won't redirect to JS file.
Screen record: https://imgur.com/gZzcX5L
I tested with Chrome and Firefox with inspect both having the same problem.
But in Chrome if I off setting for source map, it will not have this issue.
Anyone how to fix it? Compile source map issue? the js.map file not exist.
If you use Laravel Mix, you can generate source maps by calling the mix.sourceMaps() method in your webpack.mix.js file.
This resolves the problem.
mix.js('resources/js/app.js', 'public/js').sourceMaps();
Laravel Mix Source Maps documentation
I found that one solution is created a dummy file at public/js/popper.js.map, then it will back to normal, basically just fulfil what browser developer tool required, it will not redirect to that specific file.
I believe this is browser developer tools behaviour.
I received solution from the laraStart repo owner.
This error happens when you have an error and compile your javascript
code. Later, when you fix it, it will remain in cache and happens.
Please try to compile your script again and login to see.
The solution is also working as well.
I run npm update and npm run dev, it is working fine.
Open "find in files", find every commented line of code that has
sourceMappingURL=...
Delete the whole commented line for each.
There should be 3 entries here in public/app.js and 1 at the end of popper.js.
If you are using Brave shields or an ad blocker, turn it off
The best solution is just copy the popper.js.min from
node_modules
- popper.js
- dist
-> popper.js.min
this solved my headache
There are two SourceMap error in my case so the two previous answers applied to me.
1) By adding sourceMaps() in the mix.js function in webpack.mix.js file
mix.js('resources/js/app.js', 'public/js').sourceMaps();
to remove popper.js source map error.
2) Adding toastr.js.map to public/js folder to remove toastr.js source map error.
I am trying to set up the mapping feature in Chrome canary. I followed the screenshots in this answer.
The main feature works, when I inspect an element, it points me to my local sass file and when I edit it, the local file safes, and the `sass --watch' is triggered. However, the browser does not refresh, even though on the "General" tab in devtools I have checked "Auto-reload CSS upon Sass save".
Should the browser reload? Is there a way to get it to reload?
Ps - I have compass but I can not use that as it does not support mapping, so I am compiling sass through the terminal
Thanks
You probably forgot this step:
In the Sources tab, find your generated CSS file, right click on it and choose Map to network resource, and select the same file name in the shown dropdown:
and then choose the matching file from your workspace:
It could be that the Sass-file is still compiling when Chrome tries to reload the CSS. Setting the 'Auto-reload CSS upon Sass save' Timeout to 5000 ms fixed it for me. When Chrome triggers the reload, it can even prevent Sass from recompiling the CSS.
I solved the problem by installing tincr extention and now when I save locally, the browser refreshes.