反应，警告'css'已定义但从未使用过no-unused-vars答案

【问题标题】：React, warning 'css' is defined but never used no-unused-vars反应，警告'css'已定义但从未使用过no-unused-vars
【发布时间】：2017-11-20 05:06:00
【问题描述】：

我正在我的 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 呈现但仍然在控制台中收到警告？

【问题讨论】：

@ShubhamKhatri 具有相同的效果。现在控制台警告样式
刚刚在文档中注意到这一点：github.com/timscott/react-devise-sample/blob/master/client/…。 --- 将其更改为 import '../styles/base.css' 就可以了。现在我需要明白为什么

标签： reactjs eslint

【解决方案1】：

仅当您需要在代码的某些部分调用它们时才命名此“组件”。
例如使用 CSS 模块。这只是一个普通的 css，所以以这种方式加载：

import '../styles/base.css'

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

【讨论】：

【解决方案2】：

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

import SomeComponent from '../SomeComponent.jsx'

【讨论】：