live sass compiler in vs code doesn't recompile partials, only the main.scss

1
votes

I'm learning sass, and using the live sass compiler extension in vs code. I'm also using the live server extension to view it in the browser. I have a main scss file which compiles fine every time I save the file and shows the updated code in the live browser. However, when I modify the partial files (_vaiables.scss for example), the browser reloads with no css, just the html; then, I need to re-save main.scss so I can see those changes in _variables.scss. Is that how it usually works? It is kind of annoying having to save two different files to see changes on the screen. I'm pretty sure there is a better way.

Here is my main.scss

@import "abstracts/functions";
@import "abstracts/mixins";
@import "abstracts/variables";

@import "base/animations";
@import "base/base";
@import "base/typography";
@import "base/utilities";

@import "components/button";
@import "components/composition";
@import "components/feature-box";
@import "components/card";

@import "layout/header";
@import "layout/grid";

@import "pages/home"

Here is some of the settings.json file for live sass compiler extension.

"liveSassCompile.settings.formats": [
        {
            "format": "compressed",
            "extensionName": ".css",
            "savePath": "/advanced-css-course/Natours/starter/css/sass-compiler"
        }
    ],

Here is the link to css in html

  <head>
    <link rel="stylesheet" href="css/sass-compiler/main.css" />
  </head>

Thanks in advance.

1
cssvisual-studio-codesass

1 Answers

1
votes

I ended up installing node-sass to compile the code