glenn2223/vscode-live-sass-compiler

Live Sass Compiler not honoring settings.json after latest VSCODE update

codewizard13 opened this issue · 3 comments

codewizard13 commented

PROBLEM

The .vscode/settings.json file for my WordPress child theme worked fine for at least a year. Suddenly, perhaps due to a recent VSCode update, the Live Sass Compiler (LSC) plugin is no longer working. After searching online I tried the following (all to no avail):

  • Disabled all plugins except "Live Sass Compiler"
  • Changed savePath from / to wp-content/themes/elsm-astra-child
  • Changed savePath to ~/
  • Checked for plugin updates (none)
  • Checked .gitignore - nothing there that is targeting either the .vscode folder or the settings.json file
  • Checked my repo for other files with "ignore" in them - there were none

Folder Structure

wp-content/
└── themes/
    ├── astra/
    └── elsm-astra-child/
        ├── .vscode/
        │   └── settings.json
        ├── dev/
        │   ├── styles/
        │   │   └── _[various_partials].scss
        │   └── style.scss
        ├── styles/
        │   └── [misc css files from a previous install. From what I've read, these should be able to stay as they don't have any direct effect on the dev/styles/ dir]
        ├── style.css
        └── style.min.css

DESIRED OUTCOME

What it should be doing, based on the settings.json configuration, is:

  • Compiling the style.css and style.min.css file to the child theme folder root: wp-content/themes/elsm-astra-child.

  • Since I have set the liveSassCompile.settings.generateMap directive to false, it should not be generating a .map file at all.

ACTUAL OUTCOME

  • LSC is compiling to the "dev" folder instead of the child theme root (there is a "style.css" file in the root, but that was there before and it is NOT being updated on compile)
  • LSC is creating a .map file even though I instructed it not to

screen-elsm-s--LARDEV-566--02--err--vscode--folder-structure-actual

CODE

.vscode/settings.json

{
  "liveSassCompile.settings.formats": [
      {
          "format": "expanded",
          "extensionName": ".css",
          "savePath": "/"
      },
      {
        "format": "compressed",
        "extensionName": ".min.css",
          "savePath": "/"
      }
  ],
  "liveSassCompile.settings.excludeList": ["**/node_modules/**", ".vscode/**"],
  "liveSassCompile.settings.generateMap": false,
  "liveSassCompile.settings.autoprefix": ["defaults"],
  "liveSassCompile.settings.partialsList": [
    "/**/_*.s[ac]ss"
  ],
}

MY QUESTIONS

  1. Is this a known issue?
  2. What is causing this sudden ignoring of my settings.json file?
  3. How can I get LSC plugin to begin compiling correctly again?
glenn2223 commented

Looks like you have the wrong folder open. I believe the .vscode folder should be in the root for it to be identified by VS Code and the settings applied.

If you open the elsm-astra-child folder directly, or move the .vscode folder to the root, does this give the desired results (based on your settings)?

  • 👍1
codewizard13 commented

Hi, Glenn, Thanks for your quick reply! Yes, I was happy to find that when I open VSCODE on the child theme folder (elsm-astra-child) as root (from right-click) it works perfectly.

So, moving forward, how can I configure the settings.json savePath values to be (somewhat?) relative, yet to work no matter what context (folder) within wp-content I open VSCODE on? I.E., if I open on wp-content it just works, and if I open on themes it just works, and if I open on child-theme it just works?

glenn2223 commented

It seems like you have 2 choices:

  1. you could create a multi-root workspace[ref].
    This will keep core/global/overwritable settings in your workspace file. Then, settings that vary with be in their usual place (the JSON file)
  2. Or, with the settings file at the root of your new folder, you can use the formats[].saverReplacementPairs. Setting it to replace "/dev/", in the file path, with "/styles/" - as the example below defines - should give the desired outcome, provided I'm interpreting your structure correctly
{
"liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePathReplacementPairs": {
            "/dev/": "/styles/"
        }
    },
    {
        "format": "compressed",
        "extensionName": ".min.css",
        "savePathReplacementPairs": {
            "/dev/": "/styles/"
        }
    }
]
}

There's a video explaining the setting (sorry for the dodgy audio quality 😁) https://youtu.be/9J__JAgQbS0?t=308

As the actual opening issue is resolved, I'm going to close this. However, if you need a little more help, please continue to comment

  • 👀1