Open parttee opened 3 years ago
Hi @parttee,
alias
option work only for PostCSS-processed @import
and url()
statements at the moment, not for SCSS/LESS/Stylus @import
s due to high difficulty or even impossibility to implement it consistently across all preprocessors.
@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.
is there any way to use aliases with sass?
I tried to configure import.resolve
but it is not even called(
thank you!
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.
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.
and my folder structure is something like scss/ images/ foo/
Everything works if I create separate aliases for scss and images folders, like