使用Rails+React+Webpacker时，ESLint报typeface-roboto缺少CSS扩展名错误

这问题我之前在配置Rails+React+Airbnb ESLint的时候也碰到过，本质是Airbnb的ESLint规则对导入语句的扩展名检查比较严格，而typeface-roboto作为第三方npm包，我们导入时没加.css后缀，触发了import/extensions规则的错误。

下面给你两种可行的解决方案：

方案一：修改ESLint配置，忽略第三方包的扩展名检查 #

直接在你的eslintrc.json里调整import/extensions规则，添加ignorePackages选项，让ESLint跳过对npm包的扩展名校验：

{
  "extends": "airbnb",
  "env": {
    "browser": true
  },
  "rules": {
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never"
      }
    ]
  }
}

这个配置的作用是：

• 对本地的.js和.jsx文件，依然保持不需要加扩展名的规则（符合React项目的习惯）
• 对所有第三方npm包，忽略扩展名的检查，这样import 'typeface-roboto';就不会再报错了

方案二：显式添加.css后缀导入 #

如果你不想修改ESLint规则，也可以直接在导入语句里加上完整的文件路径和扩展名：

import 'typeface-roboto/index.css';

不过这种方法需要你明确知道包的入口CSS文件路径，不如方案一通用，后续如果有其他类似的第三方包导入，还得重复修改代码。

推荐优先用方案一，一次配置解决所有同类问题~

内容的提问来源于stack exchange，提问作者Mariah