如何使用 ESLint 解决 import/no-unresolved 错误？

Question

我在 Webpack 上有一个项目，我正在尝试设置 SASS 转译。我相信我已经相当接近了，尽管我的配置存在问题 (code and details in the gist here)。

运行使用代码的 webpack 会产生以下错误：

/foobar/src/js/components/App.jsx
  6:8  error  Unable to resolve path to module '../../scss/components/app'  import/no-unresolved

在这方面花了一段时间，我注意到如果我将 App.jsx 中的 import 'scss/components/app' 行替换为 import '../../scss/components/app.scss'，则转译工作正常。这让我相信有两个问题：

我的 resolve.root Webpack 配置不起作用，因为相对导入有效，但绝对导入无效。
我的 resolve.extensions Webpack 配置也没有应用，因为我需要附加 .scss 文件扩展名才能使其正常工作。

其他说明：

我正在使用 webpack 1.13.1。
如果我故意在 SCSS 文件中引入语法错误，webpack 会正确提示我该文件的问题。
我也试过将我的 resolve.root 配置设置为数组（即 [path.resolve(__dirname, './src')]），但无济于事。
目标方面，我希望实现类似于 this example 的目标。
我已经尝试使用 console-loader 调试 import 路径并得到 undefined.

任何帮助将不胜感激，谢谢！

更新：一位朋友刚刚分享说问题不是来自 sass-loader/etc.，而是来自 eslint。这意味着这个问题的性质将大不相同（更少的 webpack，更多的 eslint）。

无论如何，我的 .eslintrc 扩展了 AirBNB 的，我猜我需要根据 this plugin.

中的详细信息对其进行修改

感兴趣的部分是：

settings:
  import/ignore:
    - node_modules       # mostly CommonJS (ignored by default) 
    - \.coffee$          # fraught with parse errors 
    - \.(scss|less|css)$ # can't parse unprocessed CSS modules, either

我已经将我的 .eslintrc 更新为类似于：

{
    "extends": "airbnb",
    "settings": {
        "import/ignore": [".scss$"]
    }
}

但我仍然遇到错误。有什么想法吗？

Answer 1

你能post要点中的所有文件吗？我尝试仅通过查看代码来查找问题，但是在 webpack 配置中包含所有文件和导入的可运行示例会更有帮助。

我很好奇为什么您将 eslint 添加到加载器而不是预加载器。您需要将其添加到预加载器。

如何使用 ESLint 解决 import/no-unresolved 错误？

How to resolve import/no-unresolved errors with ESLint?

sass

eslint

webpack