Weird Characters When I Edit CSS File (Windows 10)

Support
1

Hi there

I have installed Local By Flywheel and imported a site from a zip file that came from a backup taken from the Flywheel online hosting interface (https://app.getflywheel.com/), so far so good.I can browse to the site locally, no problem.

However when I try and edit a CSS file from the local site, my changes don’t seem to take effect, so I browsed to the CSS file directly to check if my changes were present but all my edits are showing as weird characters (the rest of the file stays intact), see screenshot with my edits turned into little black diamonds with “?” in them:

image

I am using a Windows 10 Home and I have tried editing the files with various different editors: Notepad, Visual Studio Code, and viewing in different browsers, all with the same effect.

Any ideas what’s going on here?

Thanks for any help!

2

I’m having the same problem! It happens on JS files, too.

The weirdest part is that the strange characters show up at the bottom of the file even if I’m changing one line in the middle of the file.

Also, deleting the file, creating a new blank file, and then copy/pasting the content of the original file keeps the same problem.

That made me think it was a copy / paste problem (like some sort of weirdly formatted invisible character in some line that I copied from another source), but if I delete the “changed” line from the middle of the newly created file, the black diamonds disappear from the bottom … and then if I simply type out a basic CSS rule in the file, by hand, the black diamonds reappear.

3

After looking here (and while typing my reply), I was able to figure out a VERY hack-y way to “fix” this.

  1. Load the CSS file in a separate tab
  2. Make the changes to your CSS file
  3. Go to the “Local by Flywheel” main window and turn “Dev Mode” ON for your site
  4. Reload the CSS file in its tab (it won’t work yet)
  5. Go back to the “Local” main window and turn “Dev Mode” OFF
  6. Reload the CSS file again
  7. Open another new tab and revisit your site.dev again — reloading a currently open tab will NOT work, even a force-refresh

This is working for me, for some bizarre reason. Definitely not a long-term fix, but it’s letting me develop for now.

Also, I’m developing on a MacBook Pro using MacOS Sierra — so it’s not just a Windows thing.

4

Thanks for your feedback on this issue, good to know I’m not the only person with it!

A colleague suggested it might be a difference in the character encoding between my PC and the database in local flywheel, but I haven’t fully investigated this. I’ve ditched using FW Local for now in favour of an online solution. It’s handy to know your workaround which may come in handy.

Anyway will keep an eye on the thread, ta for now!

5

If you’re running into this issue please try exporting the site (right-click on the site in the sidebar) from Local then re-importing it using the “Custom” environment.

Or, you can update to 2.0.8 then re-import using the new version of the Preferred environment that has PHP 7.1.

Sorry for the trouble!

6