46,175 questions
VS Web Compiler is adding "less/" to file path
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(169.60000000000002, 79%, 26%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EHM%3C/text%3E%3C/svg%3E)
Henry, Michael
1
Reputation point
I'm using the Web Compiler extension to generate CSS from a group of LESS files.
In my LESS file, the file path to a graphic is: "Images/graphicName.png"
However, when I compile, the resultant CSS file shows the file path as "less/Images/graphicName.png" (adding "less/"), resulting in a broken link.
WC seems to be arbitrarily adding "less/".
Other projects getting compiled the same way do not have this issue.
I've checked the compilerconfig.json.defaults file for this and other projects, but (while I don't really know what I'm looking for), nothing looks out of place. The only thing I see different is that the other projects don't have "math": null; as a value, but removing it from the problematic project's compilerconfig.json.defaults file results in no change.
Community Center Not monitored
{count} votes
-
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(140.8, 78%, 23%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3ETS%3C/text%3E%3C/svg%3E)
Tianyu Sun-MSFT 34,436 Reputation points Microsoft External Staff2022-08-01T09:05:57.263+00:00 Hi @Henry, Michael ,
Welcome to Microsoft Q&A forum. I do some tests on my side, but can’t reproduce this issue. Could you share me some steps to reproduce this issue(I have Web Compiler installed)? I have also checked the compilerconfig.json and compilerconfig.json.defaults file, but haven’t found anything special. BTW, if you test in a newly created project, will this issue appear again?
-
Henry, Michael 1 Reputation point
2022-08-01T14:43:54.66+00:00 Thank you. My folder structure looks like this:
Project root
--LESS (folder containing all LESS component files
----component1.less
----component2.less
----parent.less
--Images
-compiled.cssGenerally, the project will auto-compile when I save any LESS file, but I can also right-click the "parent.less" file (all component LESS files are imported into this document), and choose Web Compiler > Re-compile file. This will generate a new "compiled.css" file for the browser.
As an example, "component1.less" may refer to a graphic located "Images", using the file path "Images/graphic.png". Once compiled, however, the resultant "compiled.css" file shows the file path as "less/Images/graphic.png", arbitrarily pre-pending the path with "less/".
This process is identical to how I work on several other projects, but I haven't run into this issue elsewhere. I have not tried creating a new project yet, as I am on some very tight deadlines and have a workaround for the time being. The workaround is not a long term solution, however, so I appreciate any help you can provide. Thank you!
-
Tianyu Sun-MSFT 34,436 Reputation points Microsoft External Staff
2022-08-02T09:47:24.03+00:00 Hi @Henry, Michael , I still can’t reproduce this issue. I tested on my side with VS 2019, and VS 2022, and created the same folder structure, but the path didn’t change. Are there any other configurations which may affect or change the path in your project/files? Do you use any other extensions? If you clean the project cache will it work? Besides, if you change the path of the graphic file, will the same issue exist?
-
Henry, Michael 1 Reputation point
2022-08-04T16:01:49.107+00:00 Yes, sorry. I forgot to even tell you the version numbers. I'm in VS 2022, using Web compiler 2022+.
Other installed extensions:
ML.NET Model Builder, Visual Studio IntelliCode, Live Share 2022, Web Live Preview, Microsoft Library Manager, SQL Service Data Tools - Sql Editor, JavaScript project system, and Visual Studio Rich Navigation.I changed the path (to a different graphic in a different folder) and it created the same error (adding "less/"). What I did notice is that in both cases where I get the error, the file path doesn't start with "/". When I add "/" to the beginning of the file path (like so: "/Images/graphic.png"), I get an accurate translation of that url (without "less/"). The problem is, what the browser needs to see is "Images/graphic.png", so "/Images/graphic.png" is an incorrect path and breaks. Unfortunately, the file structure on the server is out of my control. i can't change anything there.
Are there any other configurations which may affect or change the path in your project/files?
I don't know how to determine this. The project is pretty straightforward. Are there any other configurations in VS I should look at?
If you clean the project cache will it work?
How do I do this?
-
Tianyu Sun-MSFT 34,436 Reputation points Microsoft External Staff
2022-09-07T10:53:12.347+00:00 Hi @Henry, Michael ,
From your description, the issue should be either caused by the extension itself, or caused by the specific codes, or configurations. Could you share me a minimal reproducible sample project to check further? Besides, I also suggest you post this question here to ask the author of this extension directly.
Best Regards,
Tianyu
Sign in to comment
Sign in to answer