如何使用 ESLint 解决导入/未解决的错误？

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'，则转译工作。这让我相信有两个问题：

1. 我的 resolve.root Webpack 配置不起作用，因为相对导入有效，但不是绝对导入。
2. 我的 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

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

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