CODEWITHSUNDEEP
cssvisual-studio-codesass
Alex Yepes
Alex Yepes

Reputation: 1195

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

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.

Upvotes: 2

Views: 2854

Answers (1)

Alex Yepes
Alex Yepes

Reputation: 1195

I ended up installing node-sass to compile the code

Upvotes: 1

Related Questions