Why am I getting errors on sass/scss save?

Question

I'm in the initial stages of setting up a project and wanted to structure my sass files appropriately.

This is my structure:

/css
  style.scss
  /partials
    _colors.scss

In style.scss

@import 'partials/_colors';

body {
  background-color: $mainBgColor;
}

In _colors.scss

$mainBgColor: #eee;

When I attempt save style.scss, I get error on save... check file for syntax or something to that effect.

In fact, each of these @import directives produce errors:

@import 'partials/_colors.scss';
@import '_colors.scss';
@import '_colors';
@import _colors;

What am I doing wrong?

Answer 1

Try removing the underline and the extension on the file name, like this:

@import "partials/support";
@import "colors";

That should do it, good luck!