Compilation errors when using file-extensions when importing partials (_*.scss)

[davidspeijer]

I had some trouble to compile the source scss files. I got errors that the partial _*.scss couldn't be found. As I'm not a sass expert I had to do some research and found on the official (??) documentation that you don't use the .scss extension in an @import line.

// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}

// foundation/_lists.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}

// style.scss
@import 'foundation/code', 'foundation/lists';

Removing the .scss extension in the @import lines in styles.scss and some other files solved the issue for me.

[davidtmiller]

When using @import with SASS, the file extension does not need to be used at all times. The @import rule will find a .scss, .sass, or .css file to use with the file name. We use the file extension for specificity, but it is certainly not necessary. That being said, by not using the underbar _ in the example you've given, the partials will compile on their own in addition to being imported into the main stylesheet, which can cause a redundancy in the CSS.

Everything on the project level is working as intended currently, but we will consider removing the .scss extension from the imports if that is causing problems when adding custom code to the theme.