webpack(使用sass-loader) - scss文件@import无法识别解析别名

我的项目结构:

webpack.config.js
app--

   --> src
   ---->> components
   ------>>> myComponent.js
   ------>>> myComponent.scss

   --> styles
   ---->> variables.scss

在webpack.config module.exports中:

...
resolve: {
    alias: {
       styles: path.join(__dirname, 'app/styles') 
   }
}

在我的文件中 - myComponent.scss:

@import "styles/variables";

构建bundle.js时出现此错误:

Module build failed:
@import "styles/variables";
^
      File to import not found or unreadable: styles/variables

我如何在sass文件中@import别名？

我能够在样式表上使用我在webpack中定义的别名,使用以下命令:

@import '~alias/variables';

只是通过为别名添加前缀~为我做了诀窍,正如这里的文档所示

与此主题相关的另一个修复，删除 .scss

@import '~scss/common.scss';

应该

@import '~scss/common';