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

花了一段时间，我注意到如果我用import 'scss/components/app'替换App.jsx中的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的目的。
我尝试使用import调试console-loader路径并获得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

你可以在gist中发布所有文件吗？我只是通过查看代码尝试查找问题，但是webpack配置中包含所有文件和导入的可运行示例会更有帮助。

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

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

1 个答案: