Search code examples
sassextendgulp-sassnode-sass

Extending class in sibling imported file not working

I'm trying to use Sass's @extend feature to cut down on duplicate code, and for some reason, it's throwing an error. Example code below.

In _title.scss:

.title { font-family: "Open Sans"; }

In _user-content.scss

.user-content { h1, h2, h3, h4, h5, h6 { @extend .title; } }

In screen.scss:

@import "_title";
@import "_user-content";

When running gulp-sass:

[13:15:02] gulp-notify: [Gulp] src/assets/styles/base/user-content/_user-content.scss
Error: ".user-content h1" failed to @extend ".title".
       The selector ".title" was not found.
       Use "@extend .title !optional" if the extend should be able to fail.
        on line 1 of src/assets/styles/base/user-content/_user-content.scss
>> .user-content { h1, h2, h3, h4, h5, h6 { @extend .title; } }
   -----------------------------------------^

This seems correct to me, but it's throwing an error. What am I doing wrong?

Solution

  • Okay, I was just being dumb. I had forgotten that I had two SCSS files, one screen.scss and one editor.scss. The import was working just fine in screen.scss, but failing in editor.scss, because I hadn't imported the class I was trying to extend in to editor.scss.