不为sass工作的Webpack化名“组成”导入

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

当在文件顶部的sass文件中执行@imports时，它们工作得很好：

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