Question

我有一个非常纠结的项目结构，所以我决定使用webpack＆＃39; resolve.alias。 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 3。

我尝试了使用和不使用代字号（~）的各种符号，包含和不包含扩展名（.scss），带或不带下划线前缀（_）。我该怎么办？

Answer 1

您的别名似乎几乎正确设置。您也可以使用'..'，因此它看起来像这样。

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

然而，主要问题在于您的导入声明。由于您尝试导入某些SCSS，因此无法使用import utils from 'scss/_utilities';。相反，你必须使用@import '~scss/_utilities.scss';（注意：不要忘记使用代字号（~）。

Webpack解析别名不起作用

1 个答案: