webstrom中如何解决webpack别名引入scss文件报错的问题

Question

业务背景

• 使用webstorm开发vue cli 3项目

项目源码

app.vue

提示内容如下

我的问题

• 如何让它别报错
• 并且可以按住ctrl + 鼠标左键可以跳转到 对应的scss文件里面?

问题排除

• 我是用的webstorm 2019.1版本,貌似支持webpack的别名
• 在script标签中引入模块也是没有问题的

我的尝试

• 在根目录下添加webpack.config.js指定别名 不管用
• 禁用webstorm的inspections规则 但这不是我想要的.

Answer 1

在看看Event Log是不是报错了，webpack配置是不是没有解析？

Answer 2

scss中使用webpack别名配置需要用~，且别名需要@起头。如：配置了别名@assets: resolve(__dirname, './assets')，则在scss中使用~@assets/scss。另外在webpack.config.js中一样配置别名就可以跟普通文件一样有跳转操作了。