Question

我正在努力在我的React App中导入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模块。这只是一个常规的CSS，所以以这种方式加载：

import '../styles/base.css'

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

Answer 2

由于css文件已连接到jsx文件，因此您不需要“css from”。您只能在使用其他jsx组件时执行此操作，例如：

import SomeComponent from '../SomeComponent.jsx'

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

2 个答案: