WebStorm无法识别使用webpack别名导入的Sass文件 [英] WebStorm does not recognize Sass files imported with usage webpack aliases

问题描述

我在我的项目中使用带有 sass-loader 的webpack 2，我需要在组件样式文件中导入一些全局Sass文件（在我的案例中带有Sass变量的文件）。我不想写全局文件的相对路径，而不是我想使用绝对路径。

I use webpack 2 with sass-loader in my project and I need to import some global Sass files (in my case files with Sass variables) in component style files. I don't want to write relative path for global files, instead of this I want to use absolute path.

即。我想写

@import "~styles/variables";

而不是

@import "../../../variables"

为此我在我的webpack配置中使用'styles'目录的别名

For this I use alias for 'styles' directory in my webpack config

resolve: {
 ...
  alias: {
    'styles': helpers.root('src/styles'),
  }
}

这一切都按照我的预期工作，webpack正确编译Sass。但WebStorm不理解使用波浪号导入，并强调此导入错误。

All this works as I expected and webpack compile Sass properly. But WebStorm does not understand import with tilde and underscores this import with error.

我已经在WebStorm设置中指出 src 是我的源根目录。

I already pointed in WebStorm settings that src is my Source Root directory.

我如何解决这个问题？

推荐答案

这样的解决方案不是当前版本（2017.1 ATM）目前支持。

Such resolving is not currently supported in current versions (2017.1 ATM).

观看这些门票（星级/投票/评论）以获得任何进展的通知。

Watch these tickets (star/vote/comment) to get notified on any progress.

• Sass： https：// youtrack。 jetbrains.com/issue/WEB-25321


• 少： https://youtrack.jetbrains.com/issue/WEB-23707


• 更通用的票证： https://youtrack.jetbrains.com/issue/WEB-17533 （前2张门票的基础）

• Sass: https://youtrack.jetbrains.com/issue/WEB-25321
• LESS: https://youtrack.jetbrains.com/issue/WEB-23707
• More generic ticket: https://youtrack.jetbrains.com/issue/WEB-17533 (the base for the first 2 tickets)

这篇关于WebStorm无法识别使用webpack别名导入的Sass文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！