How do I import custom css file into main.scss? I can't get it to work.

Can you please share your workspace?

Hmm.. this could be a specificity issue. Are you changing background color for body anywhere in your main.scss file. It could be overriding _index.scss body rule.

Try using:

body {
  background-color: #000 !important;
}

...to see if that makes any difference. If so, then you're defining the background-color to be something else, later on in the styles.

Also, If your main.scss file is located at "http://www.yoursite.com/css/main.scss", and is compiled to create "http://www.yoursite.com/css/main.css", including @import "layout/_index.scss", then it would be looking for "http://www.yoursite.com/css/layout/_index.scss".

I would recommend keeping all .scss files in one directory for a less confusing structure (at the beginning, at least.) So you can have "http://www.yoursite.com/css/main.scss", which will easily be configured to use:

@import "_reset.scss";
@import "_index.scss";
@import "_theme.scss";

...so the directory listing would be:

_reset.scss
_index.scss
_theme.scss
main.css
main.scss

If _index.scss had the body's background-color set to #000, and _theme.scss had it set to #fff, then the background-color would be defined as #fff since that "cascaded" over the previous value. !important would force the first value to take precedence, overwriting whatever followed it (unless that was defined as !important, as well.)

EDIT: Sorry for any spelling mistakes. Autocorrect was being evil.

Did you check the spelling? Did you intend main.scss or main.sass?