sass - 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);

...

但是，当使用“composes”加载时，它说找不到模块：

.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 支持。