使用Webpack将SASS导入别名到另一个文件

Question

我基本上在SCSS文件中有类似的东西：

@import '~styles/dev';

然后，在我的Webpack配置中，我有：

resolve: {
  modules: [path.resolve('./src'), path.resolve('./node_modules')],
  alias: ...
}

我的文件结构是：

src/
  styles/
    dev.scss
    prod.scss

我想为某些Webpack配置将导入别名化为styles/prod。我尝试了以下每种方法：

alias: {
  'styles/dev': 'styles/prod',
}

alias: {
  'styles/dev.scss': 'styles/prod',
}

alias: {
  'styles/dev': 'styles/prod.scss',
}

alias: {
  'styles/dev.scss': 'styles/prod.scss',
}

alias: {
  'styles/dev': path.resolve('./src/styles/prod'),
}

alias: {
  [path.resolve('./src/styles/dev')]: path.resolve('styles/prod'),
}

等等但是他们都不起作用。这只是一个例子，除了别名之外，我认为我没有其他选择。我该如何工作？