webextensions
It doesn't apply CSS in file mode
I have just installed the extension, then installed the server and it doesn't inject the CSS to the website the extension is running on.
It only happens in File mode and neither CSS nor SASS is working. It does save the changes to file however.
Inline CSS/SASS mode working ok.
It's a bit a bummer to me as I prefer to write my SASS code in VSCode with proper project structure, with the extension only to sync changes on the website from file.
Browser: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36
Chrome Version 102.0.5005.61 (Official Build) (arm64) macOS
@JoJk0
The file mode of editor does basically 2 things:
- Connect to the file system (via the local NodeJS server)
- Activate "Watch CSS files to apply changes automatically" (via the local NodeJS server)
Apparently, this feature is not described very well for a user attempting to use it for the first time.
Since you mention that file changes are getting saved, it means that the issue is related to the "Watch CSS files to apply changes automatically" part.
Also, when you run the $ live-css command, you might be seeing a warning like:
Run live-css --init to generate the configuration file which offers more customizations (recommended).
Can you try to run that command and check if your configuration is correct in the generated .live-css.config.js file ?
For launching the live-css server, can you run it with $ live-css --debug command and paste the output here? There is good chance that it is would not be watching those relevant CSS files.
I was running it without the config file, so it was with default config. I ultimately used browsersync with proxy-custom-css recipe instead as it fits better to my use case. I think the issue is connected with updating the CSS on the extension side as live-css server is detecting changes in the file and prints the statement in console on change.
@anleyn The intention of the "file" editing feature is for the use case where one wishes to update the CSS files for the website being developed locally.
At 0:44 in the video https://youtu.be/krzuoPO8f7w?t=44 , the first line in the "Settings" dialog mentions that "This feature is meant for use during web development".
The message that we show should be a bit more clear to avoid such confusions.
@anleyn On the other hand, can you describe your use-case where you wish to achieve something in this manner where you need something from the "file" edit functionality the other CSS/Less/Sass tabs aren't able to provide. If we can understand your expectation from the "file" edit feature, then maybe we can design a solution for that scenario.
@webextensions like a JoJk0, I wanted to edit CSS-file with my favorite editor) Like a browsersync feature. Thanks a lot.