为 webpack 导入样式文件时，Linter 显示“no-unused-vars”

Posted 2023-02-22

【中文标题】为 webpack 导入样式文件时，Linter 显示“no-unused-vars”

【英文标题】：Linter showing "no-unused-vars" when importing a style file for webpack

【发布时间】：2017-08-20 00:33:26

【问题描述】：

我在一个 React 项目中使用 linter-eslint 原子包。我使用 webpack 作为打包器，并在构建过程中导入要处理的 sass 样式。

当我在入口文件中导入样式时，我不使用它，但我需要在那里导入它，以便 webpack 触发处理。我这样做：

import commonStyle from './public/styles/common.sass';

我收到错误no-unused-vars，因为它实际上并没有在任何地方使用。

我可以将no-unused-vars 设置为发出警告而不是错误，但我想知道是否应该以不同的方式进行导入，或者当导入的文件具有.sass 扩展名时是否可以禁用该规则。

感谢您的帮助！

【参考方案1】：

编辑 2019-09-17

我编写的原始解决方案是一种解决方法，但除了忽略模式之外，还有更好的替代方法。解决方案是避免在导入时创建常量：

import './public/styles/common.sass'

这很有效，没有变量可以忽略，因为我们只是没有定义一个。

我将在下面留下原始答案，因为忽略模式在其他情况下可能有用。

---

原答案 2017-03-27

阅读ESLint docs for no-unused-vars 后，我意识到最好的方法是使用选项varsIgnorePattern。使用这个选项，我们可以定义一个将被 linter 忽略的正则表达式字符串。

此外，由于我使用的是eslint-config-react，因此我必须将^React$ 添加到被忽略的字符串中，因为它是该软件包附带的。如果我只是覆盖varsIgnorePatter，每次导入 React 时都会出错。

.eslintrc 文件的补充内容如下：

"no-unused-vars": [
  "error",
  "varsIgnorePattern": "_$|^React$"
]

现在 linter 将忽略所有以下划线结尾的变量，例如 styles_