scss import call does not work with aliases that has special characters

[parttee]

If I create an alias for root folder in the config object and set it to some special character, then the alias does not work in the scss import call but works f.e. in background image.

/* config */
styles({
  ...
  alias: {
    '@': path.join(__dirname),
  }
})

and my folder structure is something like scss/ images/ foo/

/* foo/style.scss */
@import "@/scss/mixins"; /* does not work */

.foo {
  background: url("@/images/foo.png"); /* for some reason this still works */
}

Everything works if I create separate aliases for scss and images folders, like

styles({
  ...
  alias: {
    'scss': path.join(__dirname, 'scss'),
    'images': path.join(__dirname, 'images'),
  }
})

[Anidetrix]

Hi @parttee,

alias option work only for PostCSS-processed @import and url() statements at the moment, not for SCSS/LESS/Stylus @imports due to high difficulty or even impossibility to implement it consistently across all preprocessors.

[Enteleform]

@Anidetrix I'm having a similar issue.

Is it possible to get this working via the sass configuration option? I tried that, and also tried using @rollup/plugin-alias, but was unable to get alias usage working.

[aleksanderd]

is there any way to use aliases with sass?

I tried to configure import.resolve but it is not even called(

thank you!

[aleksanderd]

my solution:

const scssAliases = {
  '@theme': '/app/theme',
  '@': '/',
};

const stylesOptions = {
  ...
  sass: {
    sync: true,
    importer(url) {
      for (const [alias, path] of Object.entries(scssAliases)) {
        if (url.indexOf(alias) === 0) {
          const file = srcPath + url.replace(alias, path);
          return { file };
        }
      }
      return null;
    },
  },
  ...
};

be noted there is different importer formats for dart-sass and node-sass.

node-sass importer must not return value, but use third parameter done callback.