Webpack alias not working for sass "composes" imports

Question

I have a few aliases set up in webpack like this:

  resolve: {
    alias: {
      data: path.resolve(__dirname, 'data'),
      withStyles: 'isomorphic-style-loader/lib/withStyles',
      modules: path.resolve(__dirname, 'src', 'modules'),
      components: path.resolve(__dirname, 'src', 'components'),
    },

They're working fine when doing @imports in sass files at the top of a file:

@import '~components/common/css/mixins';

.root {
  @include scale-size(padding-top, 24px, 42px);

...

However, when loading with "composes" it says it can't find the module:

.bottom-cta {
  composes: cta from '~components/common/css/button';
...

However, if using a "normal" path (../../components/common/css/button) it works.

Is this expected behaviour? How can i solve this?

Thanks in advance.

Manning

try without ~ – Tega

Does not help unfortunately. – Manning

Answer 1

Use https://www.npmjs.com/package/postcss-modules-resolve-from-alias

Please note that you'll need to add aliases separately to your config and you will still lose IDE support.

Commixture