ritwickdey / vscode-live-sass-compiler

Compile Sass or Scss file to CSS at realtime with live browser reload feature.
https://ritwickdey.github.io/vscode-live-sass-compiler/
MIT License
658 stars 169 forks source link

@import files needing to be open? #295

Open BenMcD0nald opened 4 years ago

BenMcD0nald commented 4 years ago

Hey,

I've just started to get into Sass for the redesign of my website so I'm finding this plugin extremely useful....thanks for the time put in to creating it!!

The issue I'm having is that I'm trying to organise the code using @imports, this works just fine as long as all the imported files are open but I get errors if they are closed as it appears the information can't be found for the compile

I looked everywhere for an answer but I guess I'm missing something as a newbie because the 'advanced Sass' course I'm going through sees the instructor creating a full on file structure and compiles everything with just the main file open. I think he's using node but I'm guessing this is a typical industry use case

Is there a way of compiling these @imports without having to have them all open?

Thanks :) Ben

glenn2223 commented 4 years ago

Hi @mcdnben

The extra files shouldn't have to be open in order to successfully compile, could you please send any error messages your getting?

BenMcD0nald commented 4 years ago

Hey,

So, the only actual error I receive is when I don't have the variable @import open at which point I get something like the following:

Compilation Error
Error: Undefined variable: "$mkdblue".
        on line 18 of sass/c:\Users\Ben McDonald\AppData\Roaming\Code\User\globalStorage\humy2833.ftp-simple\remote-workspace-temp\370a25340812a181f53af661728b60ba\staging\5\wp-content\themes\munkeykeys\style\sass\style.scss
>> .splide-container{background-color: $mkdblue; border-radius: 5px;}

Other than that if I save the main scss file it'll compile successfully but only bring in @imports which are actually open at the time.

Perhaps I have something set-up incorrectly? All scss files are in the same folder @imports named such as _variables _initial etc and declared as

@import './variables';
@import './initial';

Settings are:

{
    "workbench.colorTheme": "Monokai",
    "liveSassCompile.settings.formats": [
        {
            "format": "compressed",
            "extensionName": ".css",
            "savePath": "/style/css/",
        }
    ],
    "workbench.startupEditor": "newUntitledFile",
    "liveSassCompile.settings.generateMap": false,
}

I did think it strange that it'd need them all to be open but couldn't figure out what I'm missing?

Thanks for your time :) Ben

BenMcD0nald commented 4 years ago

So, I'm still not 100% sure what's happening but I've come to realise a few things and thought I'd update this thread in case any one else has a similar issue....though my use-case might be fairly limited.

What I've realised is that I can indeed compile sass files without the imports being open but not using the setup I am for this project. The current project is hosted on a staging site and I'm using an extension called 'ftp-simple' to access it directly from VSCode. I'm no expert but I presume the difference in functionality I'm seeing in Live Sass Compiler has something to do with the files not actually 'existing' (as a temp file I guess) unless they are actually open. I imagine there's not much that can be done about this behavior

Just thought I'd leave it out there in case anyone has a suggestion or stumbles onto this with a similar issue....