React，警告 'css' 已定义但从未使用过 no-unused-vars

Question

我正在努力在我的 React 应用程序中导入 CSS 文件。我有 css 像这样成功导入：

原始来源应用程序：https://github.com/timscott/react-devise-sample

MainLayout.jsx

import css from '../styles/base.css'

base.css

body {
  opacity: .1;
}

当我在浏览器中加载我的应用程序时，我看到样式正在生效。问题是，在控制台中我收到 JS 警告：

webpackHotDevClient.js:198 ./src/layouts/MainLayout.jsx

.../client/src/layouts/MainLayout.jsx
  12:8  warning  'css' is defined but never used  no-unused-vars

✖ 1 problem (0 errors, 1 warning)

我在 React 中做错了什么导致 CSS 呈现但仍然在控制台中收到警告？

Answer 1

您不需要 "css from"，因为 css 文件已经连接到 jsx 文件。你只有在使用其他 jsx 组件时才这样做，例如：

import SomeComponent from '../SomeComponent.jsx'

Answer 2

仅当您需要在代码的某些部分调用它们时才将其命名为 "component"。
例如使用 CSS-模块。这只是一个常规 css，所以以这种方式加载：

import '../styles/base.css'

但是如果你仍然想保留这个未使用的变量，你可以编辑你的 es-lint，并删除这条规则。（不推荐）

React，警告 'css' 已定义但从未使用过 no-unused-vars

React, warning 'css' is defined but never used no-unused-vars

reactjs

eslint