Sass / Dartsass-rails Error: Can't find style sheet to import / Undefined mixin

Question

Rails 7, dartsass-rails, cssbundling-rails, propshaft, importmaps

App structure

app/assets/stylesheets/
/components
  _index.scss
  ///other flies
/global
  _index.scss
  _variables.scss
  ///other flies
/layouts
  _index.scss
  ///other flies
/mixins
  _index.scss
  _media.scss
/pages
  _index.scss
  ///other flies

My application.sass.scss will compile fine

/app/assets/stylesheets/applications.sass.scss
    // Entry point for your Sass build
    @use 'application';
    @use 'actiontext';
    
    @use "mixins";
    @use "global";
    @use "components";
    @use "layouts";
    @use "pages";

I'm able to reference my _variables.scss from global.

However when I try to references the mixin/_media.scss in my _container.scss it fails. I receive `

Error: Undefined mixin.

> @include media(tabletAndUp) { 
>     padding-right: var(--space-m);
>     padding-left: var(--space-m);
>     max-width: 60rem;
>  }

If I add the path to the top of the file I receive the following. Side-note: I have also played referencing the whole tree, i.e. working my way-up @use 'mixins/media', @use 'stylesheets/mixins/media'

Error: Can't find stylesheet to import.

1 │ @use "mixins";

app/assets/stylesheets/layouts/_container.scss 1:1 @use
app/assets/stylesheets/layouts/_index.scss 4:1 @use
app/assets/stylesheets/application.sass.scss 8:1 root stylesheet

.container {
        width: 100%;
        justify-content: center;
        padding-right: var(--space-xs);
        padding-left: var(--space-xs);
        margin-left: auto;
        margin-right: auto;
      
       @include media(tabletAndUp) {
         padding-right: var(--space-m);
         padding-left: var(--space-m);
         max-width: 60rem;
       }
      }

media.scss file

@mixin media($query) {
    @if $query == tabletAndUp {
      @media (min-width: 50rem) { @content; }
    }
  }

Reading through these here here and here, it seems logical the problem would be to add the @use to the top of the file but alais no solution.

Has anyone run into this problem? Or know of a solution?

Edit: After reading some more post especially this one it looks like or at least to my understanding that each sub directory in the stylesheets tree will need to have it own media partial.

So the tree will look like this:

 app/assets/stylesheets/
    /components
      _index.scss
      _media.scss
      ///other flies
    /global
      _index.scss
      _variables.scss
      ///other flies
    /layouts
      _index.scss
      _media.scss
      ///other flies
    /pages
      _index.scss
      _media.scss
      ///other flies

Then in each file that you want to use that partial you call it by @use 'media' as *. However this seem a little redundant because that means each media partial will have to be updated in the future if changes are made.

If someone with better knowledge of the dartsass pipeline stumbles upon this and give a better answer or just confirm this understanding that would be much appreciated.

For now, people running into this same problem, this is a working solution.

Answer 1

Edit: After reading and research, it looks like or at least to my understanding that each sub directory in the stylesheets tree will need to have it own media partial.

So the tree will look like this:

app/assets/stylesheets/
    /components
      _index.scss
      _media.scss
      ///other flies
    /global
      _index.scss
      _variables.scss
      ///other flies
    /layouts
      _index.scss
      _media.scss
      ///other flies
    /pages
      _index.scss
      _media.scss
      ///other flies

Then in each file that you want to use that partial you call it by @use 'media' as *. However this seem a little redundant because that means each media partial will have to be updated in the future if changes are made.

With that said this is the road map forward acorrding to the docs.