search

willofindie / vscode-cssvar

VSCode extension to support CSS Variables Intellisense
https://marketplace.visualstudio.com/items?itemName=phoenisx.cssvar
MIT License
252 stars 4 forks source link

The extension does not work #33

Closed SineYlo closed 2 years ago

SineYlo commented 2 years ago

Hi! I installed the extension, and it didn't work right away, I went to the settings to specify the path to the files, and it still doesn't work. I am more than sure that I am doing something wrong, but there is not much instruction on how to run this extension. Furthermore, I attach screenshots and an explanation of what I did.

  1. Here is my project folder. I write all the code in the styles.scss file. The styles.css file is the final file into which all SCSS files merge. The variables.scss file contains the very variables that I plan to call. picture-1
  2. Here are the contents of the variables.scss file. picture-2

  3. And actually here is the main styles.scss file in it, I'm trying to call a variable and there are absolutely no hints. As if he just doesn't see this variable :(. Actually, it was exactly the same before installing this extension. Nothing changed after that. picture-3

    In settings.json I didn't prescribe anything. I honestly don't know what the problem is. Therefore, I hope you can tell me how to make this extension work. Maybe I didn't understand the meaning of this extension, but it seems to me that it just doesn't work for me :)

phoenisx commented 2 years ago

This extension does not support Sass parsing by default, to keep the extension size small and concise.

Scss is a custom CSS extension, did you try the methods mentioned in Custom Extension to support Sass files?

Let me know if that works out for you.

SineYlo commented 2 years ago

@phoenisx In general, I figured out what needs to be done to make it all work for SCSS files

  1. You need to go to settings.json and register the following settings (I have written in the parameter cssvar.files selection of all SCSS files for convenience): picture-1
  2. You need to install the postcss and postcss-scss packages (used this command — npm i -D postcss postcss-scss)
  3. The last thing to do is restart VS Code

I suffered for a long time, but the result is worth it. If you wish, you can write this entire installation process somewhere in the README for use with SCSS files :) I really liked this extension!