Does @snowpack/plugin-sass has support for aliasing?

[shubhamV123]

I was playing with snowpack with scss. I came to know about this @snowpack/plugin-sass before that I was compiling my using watch script. Plugin works well. I am not sure this feature is implement by @snowpack/plugin-sass yet. So suppose that in my snowpack.config.js. I created alias like this:

alias: {
    '@app': './src',
    components: './src/components',
    '@styles': './src/styles/index.scss',
  },

and inside some .scss file . Before using the plugin its working well as it is taking relative path from snowpack config. I am just curious in my scss file can I use something like this:

import '@styles';<-- this alias is taken from snowpack

I can always do this to working:

@use 'styles/index.scss'; //This is working using plugin

Not sure about first one why it is not working

[FredKSchott]

Nope, this isn't currently supported! @use imports in Sass are strange, since they aren't really imports that Snowpack ever sees. The Sass plugin is the only one to look at those, so we don't really have a good hook to add support here. Maybe a regex find/replace before we pass it to the Sass compiler?

[shubhamV123]

Thanks for answer. I am also thinking in this way. Will update this discussion once I find better findings!

[MarcDAFrame]

webpack using sass-loader uses a ~ at the beginning of an import to denote it as an alias.

@import "~@styles/colors.scss";

[FredKSchott]

No ~ needed in Snowpack

[MarcDAFrame]

so snowpack will find the @Styles alias for @import "@styles/colors.scss";

cause I'm getting the same error after removing the ~ from the imports.

If aliasing isn't a feature yet, I could add it.

I imagine it would go in the map function

and attempt to match the beginning of s to the alias's defined in snowpack.config.js.

The only thing stopping me right now is that I can't tell where to access the snowpack.config.js alias object.

thanks for all the help on this,

I really like snowpack as a project and am really excited to start using it.

[FredKSchott]

@MarcDAFrame sorry I missed this comment back in December! I just responded below with some tips to implement. If @jillesme doesn't respond, I'd still love your help on this if you're still interested.

[ghost]

I also need this capability in order to import global variables..
Is there a solution?

[jillesme]

I'd also like to +1 this problem. It works great for imports in JavaScript (and TypeScript) but scss @use not yet.

If you could point me into the right direction, perhaps I could make a PR?

[FredKSchott]

A PR would be fantastic! It looks like Sass doesn't have native support for this, so we'll be stuck doing the aliasing ourselves. Check out the scanSassImports() function in plugins/plugin-sass/plugin.js:

function scanSassImports(fileContents, filePath, fileExt) {
  // TODO: Replace with matchAll once Node v10 is out of TLS.
  // const allMatches = [...result.matchAll(new RegExp(HTML_JS_REGEX))];
  const allMatches = [];
  let match;
  const regex = new RegExp(IMPORT_REGEX);
  while ((match = regex.exec(fileContents))) {
    allMatches.push(match);
  }
  // return all imports, resolved to true files on disk.
  return allMatches
    .map((match) => match[2])
    .filter((s) => s.trim())
    .map((s) => {
      return path.resolve(path.dirname(filePath), s);
    });
}

We already have support for scanning imports from your Sass files. In this case, you'd just need to add support to rewrite them if they match an alias. fileContents.replace(regex, () => ...) will probably give you most of what you need:

-function scanSassImports(fileContents, filePath, fileExt) {
+function scanAndResolveSassImports(fileContents, filePath, fileExt, aliasMap) {
  const allImports = [];
  const regex = new RegExp(IMPORT_REGEX);
  fileContents.replace(regex, (...args) => {
    // TODO: rewrite import based on alias map
    // TODO: save (resolved, re-written import) to allImports
  });
  return allImports;
}

[rburnham52]

I started having a quick look at this, do you have any info on setting up the dev environment?

[rburnham52]

It would be great to see a solution for this, it looks like this it the main issue holding us back from converting our webpack project.

[mihanizm56]

all my projects have a three-acrhitecture style
and the depth of the modules could be big
aliases resolve a lot of problems - and without them I couldn't switch to the snowpack ((

[Danzo7]

I already solved this issue but since my last PR has been on hold for almost a month I'm not going to commit anything until its done.
if you want to switch you still can use snowpack-sass-compiler a plugin that I created a while ago which support aliases now until they back to track

[rburnham52]

Looks like this only works for sass files. Sass in my Svelte files still have an issue. Which means the svelte preprocessor is probably compiling sass in a different way to a sass file.

[Danzo7]

I integrated this feature in my plugin https://github.com/Danzo7/snowpack-plugin-sass-compiler ,I will try to PR it to the official plugin when the guy behind this is back.

[FredKSchott]

Hey @Danzo7, appreciate the patience! Catching back up on issues/PRs now after some time away, looking forward to taking a look at this

[Danzo7]

Hi @FredKSchott ,Great to hear back from you hope you are doing well 😊

[haruhihi]

So，is this fixed yet?

[cain-wang]

For me, I have to specify the load path and get rid of the '~' in the @import.

// @import `~style/forms.scss` to
@import 'style/forms.scss';

[
  '@snowpack/plugin-sass',
  {
    compilerOptions: {
      loadPath: './src',
    },
  },
],

[jacty]

const result = sass.renderSync({
  file: filePath,
  importer: (url)=>{
    const aliasEntry = findMatchingAliasEntry(url, config);
    if (aliasEntry){
      const {from, to} = aliasEntry;
      url = url.replace(from, to);
    }
    return {
      file: url
    };
  }
});

return {
'.css':{
  code: result.css.toString() || '',
}
}

I rewrite a plugin-sass only for my only use with the function denotes above to solve the pain here. Sass Javascript can find the string after @use @import etc. for us and then we can get the match to replaced in the content.
The thing I am not sure here is why plugin-sass abundant Sass Javascript API for its CLI..? Or perhaps we can have an option to use the API directly ?