Migrate from @import to @use

[Peyton Seigo]

Currently, include-media doesn't work with @use. According to the Sass @import docs,

The Sass team discourages the continued use of the @import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the @use rule instead.

Software versions

• Node v10.15.2
• Dart Sass v1.26.3
• include-media v1.4.9

Current behaviour

@use 'include-media';

@include media('<=desktop') {
  p {
    color: blue;
  }
}

compiled with

sass --load-path=node_modules/include-media/dist/ styles.scss styles.css

produces the error

Error: Undefined mixin. 
   ╷
8  │ ┌ @include media('<=desktop') {
9  │ │   p {
10 │ │     color: blue;
11 │ │   }
12 │ └ }

Possible starting point

From the same docs page,

[The Sass team has] written a migration tool that automatically converts most @import-based code to @use-based code in a flash. Just point it at your entrypoints and let it run!

[Jack McNicol]

@pseigo you need to use the namespace when you use @use which is by default the last import path, or add it globally with the @use 'include-media' as *;

The way you are importing it works as documented with

@use 'include-media';

@include include-media.media('>=desktop') {
  p {
    color: blue;
  }
}

but if you dont want the include-media namespace then either add as * or another namespace.
eg:

@use 'include-media' as im;

@include im.media('>=desktop') {
  p {
    color: blue;
  }
}

[Peyton Seigo]

@jackmcpickle
D'oh! That's what I get for cutting corners in the docs. Thanks for the great examples, I really appreciate it! I see the @use namespace section now and this seems to make sense.

Feel free to close this if the title isn't accurate. :)

[Jack McNicol]

No worries mate. Good luck!