WebStorm无法识别使用webpack别名导入的Sass文件

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

即我想写

@import "~styles/variables";

，而不是

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

为此，我使用了 '风格' 目录别名在我的WebPack配置

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

所有这些工作原理我期望和webpack正确编译Sass。但WebStorm不理解带有波形符号的导入，并强调此导入带有错误。

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

我该如何解决这个问题？

来源

2017-04-10 Andrii Golubenko

嗨，有同样的问题。你解决了吗？ –

@AndriiRomanchak我没有解决这个问题，因为我有非常复杂的webpack配置，但JetBrains teem添加webpack配置分析器到WebStorm，它工作正常。看看 https://blog.jetbrains.com/webstorm/2017/06/webstorm-2017-2-eap-172-2827/ –

当前版本（2017.1 ATM）当前不支持此类解决方案。

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

萨斯：https://youtrack.jetbrains.com/issue/WEB-25321
LESS：https://youtrack.jetbrains.com/issue/WEB-23707
更通用票：https://youtrack.jetbrains.com/issue/WEB-17533（该基地为第2张）

来源

2017-04-10 13:36:33 LazyOne

刚刚更新至2017.2.4版，仍然收到相同的错误。链接表示问题已修复 –

@AndriiRomanchak如果您确定所有配置都正确但仍然无效，请在相应的故障单或文件中询问新问题。 – LazyOne

我的PHPStorm理解来自'node_modules'文件夹的路径，但不理解'src'文件夹中的路径。我的'src'被标记为源根目录。你能提供任何建议吗？ –

问题被固定在PHPStorm（可能WebStorm过），因为版本2017.2.2。

更多信息可以找到here，因为它指出上面。

别名做工精细，但如果你不使用Webpack（你有一个Angular CLI项目为例），你可以创建一个假webpack.config.js文件在项目的根，用适当的别名填充它只是为了让IDE解决您的文件。

这里的工作示例：

// fake webpack config used only to help make PHPStorm resolve imported .sass files 
var webpack = require('webpack'); 

module.exports = { 
    context: __dirname, 

    // Directory resolution fix 
    resolve: { 
    alias: { 
     sass: "/src/sass" 
    } 
    } 
};

来源

2017-09-19 15:10:00

WebStorm无法识别使用webpack别名导入的Sass文件

回答

相关问题