There's already a module with namespace

The Ember.js application I work on is structured in ‘pods’.

This means that the stylesheet is co-located with the associated template and javascript.

For example

/my-component
     /style.scss
     /component.js
     /template.hbs

When I recently attempted to migrate from @import to @use I get the error

There’s already a module with namespace “style”

[jathak]

That error occurs when attempting to @use two modules with the same namespace. The default namespace is the basename of the file passed to the @use rule, so if you had something like:

@use "component-a/style";
@use "component-b/style";

you would get this error because both of those rules use the namespace style. To fix this manually, you can use an as clause to manually specify the namespace for a @use rule. e.g.

@use "component-a/style" as a-style;
@use "component-b/style" as b-style;

To make the migration easier, you can use the Sass migrator, which should automatically add as clauses when necessary (it will also automatically add these namespaces to any variable, mixin, or function references from other files, so you don’t have to do that manually either). If you already used the migrator and the stylesheets it output resulted in this error, then that’s a bug with it, and you should file an issue here.

[amk221]

Thanks @nex3, that helps a little, apart from this use case:

@use 'routes/people/index/index' as people-index;
@use 'routes/people/show/index' as people-show;
@use 'routes/people/create/index' as people-create;
@use 'routes/tags/index/index' as tags-index;
@use 'routes/tags/show/index' as tags-show;
@use 'routes/tags/create/index' as tags-create;

…but I can probably live with that.

In case it’s not clear, the above is required because this doesn’t work for the two reasons mentioned in the comments:

@use 'routes/people/index'   /* "routes/people/index" doesn't automatically pick up "index.scss" inside the index directory */
@use 'routes/people/show';
@use 'routes/people/create';
@use 'routes/tags/index'; 
@use 'routes/tags/show';    /* "show" clashes with the people/show, etc... */
@use 'routes/tags/create';