[bug?] Webpack aliases being ignored.

[trusktr]

I have an alias like this in webpack.config.js:

            'common': path.resolve(__dirname, '..', '..', 'common'),

and I have import statements like these in my .scss files:

@import "common/scss/colors";

but it doesn't work.

If I change it to

@import "../../common/scss/colors";

just like what the Webpack alias defines, then it works!

I can work around the problem by making my own loader, and modifying the @imports to have the unaliased strings, but that's obviously not desirable.

Possibly related: #173

[trusktr]

Oh, I'm in Webpack 2 by the way. The config structure has changed, in case that might be related. Haven't tried in Webpack 1.

[williamboman]

Having the exact same issue when migrating from webpack 1 to 2.

[jhnns]

To be honest, I'm not sure if aliases are supported. It should be supported afaik, but we have no test case for that.

Thx for reporting this. I will take a look.

[adamscybot]

Im on Webpack 2 and have experienced this.

In a separate but possibly related issue (of webpack config seemingly not matering to @import), I've also tried using a loader for a specific SASS file to load some web fonts via webfonts-loader. This has no affect, even though my test is right.

These issues seem like the when you @import something, it doesn't properly go through the normal Webpack processing.

[williamboman]

These issues seem like the when you @import something, it doesn't properly go through the normal Webpack processing.

Have you read the docs regarding @imports? (you probably forgot to use ~)

[adamscybot]

@williamboman

So even if I use @import inline like this:

@import '~webfonts-loader!../js/alfa.font.js';

Or

@import 'webfonts-loader!../js/alfa.font.js';

I get File to import not found or unreadable. If instead of using inline loaders you specify it in the Webpack config then just import the file, I can see from the resulting error that it attempted to load the file directly instead of the result of passing the file through the loader I specified.

I feel this could be related to this issue as it seems somewhere along the line the @imported file skips part of the webpack algorithm.

[satiewaltz]

@williamboman
I'm having this issue as well. Aliases don't resolve on build and throw this even if I use ~:

File to import not found or unreadable: ~styles/mixins

Even stranger: this issue so far appeared on Ubuntu, and not in other operating systems.

[vorlov]

+1 same issue, webpack 2

[conways-glider]

I have the same issue in webpack 2.

[alexander-akait]

PR welcome 👍

The only way I have worked around this in to create a dummy directory in node modules, and symlink the path that you want.
I do this in a git postinstall hook

#!/bin/bash
ROOT_DIR="$(dirname "$(dirname "$(readlink "$0")")")"
ALIAS_DIR="node_modules/yourprojectname"
YOUR_FOLDER_TO_LINK = "some/path/inside/root"

cd $ROOT_DIR
// remove the folder if created previously
if [ -d "$ALIAS_DIR" ]; then
    rm -r "$ALIAS_DIR"
fi
// create the node_modules/directory you want
mkdir "$ALIAS_DIR"

if [ -d "$YOUR_FOLDER_TO_LINK" ]; then
   cd "$ALIAS_DIR"
   ln -s "../../$YOUR_FOLDER_TO_LINK" .
fi

Then in scss land you can do:

// main.scss
@import "~yourprojectname/the-symlink-directory-you-have-created/whatever";