Avatar of dlearman1
Flag for United States of America

asked on 

Why does this modular Sass workflow generate a 'stylesheet cannot be found' error?

I'm trying to convert scss files to the modular syntax -@use and @forward. I'm working with the following striped-down file structure:








This is what I have now.

// base/_theme.scss

      $brand-gold: hsla(32, 47%, 46%, 100%);

// base/_index.scss

      @forward 'theme';

// helpers/colors.scss

      @use 'base';

     button {

        color: $brand-gold;


// helpers/_index.scss

     @forward 'colors';

// main.scss

      @use 'base';

     @use 'helpers';

This generates the following error message:

Dart Sass failed with this error: Can't find stylesheet to import.
8 │ @use 'helpers' as *;
  │ ^^^^^^^^^^^^^^^^^^^
  helpers/_colors.scss 8:1  @forward
  helpers/_index.scss 7:1   @use
  main.scss 3:1             root stylesheet

It just seems like it should work. I tried relative path notation also, with the same result. Maybe I don't understand how the @use & @foreward flow works. Can anybody glue me in? I'm using codekit 3 with dart Sass compiler.


* SASS (Syntactically Awesome Stylesheets)* SCSSCSS

Avatar of undefined
Last Comment

8/22/2022 - Mon