Webpack别名不适用于sass"组合"导入

Question

我在webpack中设置了一些别名,如下所示:

  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'),
    },

@imports在文件顶部的sass文件中执行时,它们工作正常:

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

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

...

但是,当加载"compes"时,它说它找不到模块:

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

但是,如果使用"普通"路径(../../components/common/css/button)它可以工作.

这是预期的行为吗？我怎么解决这个问题？

提前致谢.

Answer 1

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

请注意，您需要将别名单独添加到您的配置中，并且您仍然会失去 IDE 支持。