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

...

然而，当加载“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的支持。

Webpack别名不适用于sass“撰写”导入

1 个答案: