WebStorm無法識別使用webpack別名導入的Sass文件

Question

我在我的項目中使用帶有sass-loader webpack 2，我需要在組件樣式文件中導入一些全局Sass文件（在我的案例中帶有Sass變量的文件）。 我不想寫全局文件的相對路徑，而不是我想要使用絕對路徑。

即我想寫

@import "~styles/variables";

代替

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

為此，我在webpack配置中使用'styles'目錄的別名

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

所有這些都按照我的預期工作，webpack正確編譯Sass。 但WebStorm不理解使用波浪號導入，並強調此導入錯誤。

我已經在WebStorm設置中指出src是我的源根目錄。

我該如何解決這個問題？

Answer 1

目前的版本（2017.1 ATM）目前不支持這種解決方案。

觀看這些門票（星級/投票/評論）以獲得任何進展的通知。

• Sass： https ： //youtrack.jetbrains.com/issue/WEB-25321
• 更少： https ： //youtrack.jetbrains.com/issue/WEB-23707
• 更通用的門票： https ： //youtrack.jetbrains.com/issue/WEB-17533 （前2張門票的基礎）

Answer 2

自2017.2.2版以來，PHPStorm（可能也是WebStorm）也解決了這個問題。

更多信息可以在這里找到，如上所述。

別名工作正常，但如果您不使用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"
    }
  }
};