Avatar of dlearman1
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:

_scss

      base

         _theme.scss

        _index.scss

      helpers

         _colors.scss

      main.scss


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
dlearman1

8/22/2022 - Mon