Webpack解析别名不起作用

Question

Resolve在我的配置中如下所示：

...
  resolve: {
    alias: {
      scss: path.resolve(__dirname, 'source', 'sass') // I tried '..', 'source' as well
    }
  },
...

但是当我在js中使用它时。

import utils from 'scss/_utilities';

我收到一个Cannot find module错误。

我的目录结构如下：

| webpack
|- dev.js
|- prod.js
| source
|- sass
|-- _common.scss
|-- _variables.scss
|-- globals.scss
|- js
|-- components
|--- Card
|---- index.js // from here I am importing

我用的是Webpack三号。

我尝试了各种带和不带代字号的符号(~)，带和不带扩展名的符号(.scss)，带或不带下划线前缀的符号(_)。我能做什么?

Answer 1

您的别名似乎设置得几乎正确。您还必须使用'..'，所以它看起来像这样。

  resolve: {
    alias: {
      scss: path.resolve(__dirname, '..', 'source', 'sass')
    }
  },

然而，主要的问题在于您的import语句。由于您正在尝试导入一些SCSS，因此不能使用import utils from 'scss/_utilities';。相反，您必须使用@import '~scss/_utilities.scss'; (注意:不要忘记使用代字号(~)。