I'm creating a Wordpress theme from scratch using a full course tutorial on how to make one.
I'm just following the steps but it goes wrong where I want to set up gulp so it can preview the changes in the sass file.
After a day of debugging errors, I finally got it working as it says "Gulp watching", which means it's waiting for changes in the sass file.
But for some reason, it's just not doing anything.I tried editing some css but it won't do anything.. Is there anyone who had this issue and got it working?
Related
I'm building in WebStorm.
I have a main.scss witch references several partial files (names prefixed with _) via #use. I have a file watcher set up and everything works fine when I'm working in the main.scss - I make changes, they get compiled and are reflected in my build.
When I make change in a partial though they don't seem to trigger the file watcher. In order for the changes to show in the build I have to jump back to main.scss and make some small change that triggers the watcher and everything gets compiled. This is a bit of a pain to keep having to do but I've tried messing around with the watcher settings and have had no luck.
Can anyone suggest a way to trigger the file watcher when partial SCSS files are updated?
Thanks
Not a full answer as WebStorm just doesn't seem to want to play ball but in the end I set up webpack and am using the sass-loader which seems to work as desired and actually makes more sense as I'll usually be running webpack anyway.
I want to edit sass files for my project using google devtools.
After adding my project from the workspace, I can make live changes.
But..
The source map shows the path to the sass files incorrectly.
as seen in the links.
the selector does not point to the right place.
https://imgur.com/45PSmdB
https://imgur.com/A7Di1Kz
where did I make a mistake?
EDIT:
I solved the problem myself :)
cache and cookies cleared.
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 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
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.