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

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes