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

Question

I'm working to import CSS files in my React App. I have css being imported successfully like so:

Original source app: https://github.com/timscott/react-devise-sample

MainLayout.jsx

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

base.css

body {
  opacity: .1;
}

When I load my app in a browser I see the styles taking effect. The problem is, in the console I'm getting a JS warning:

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)

What am I doing wrong in React to cause the CSS to render but still get a warning in the console?

Answer 1

Name this "component" only if you need call them in some part of the code.
e.g. Using CSS-Modules. This is only a regular css so load in this manner :

import '../styles/base.css'

But if you still want to keep this unused var you can edit your es-lint, and delete this rule. (Not Recommended)

Answer 2

You do not need "css from" since the css file is already connected to the jsx file. You only do that when using other jsx components, for example:

import SomeComponent from '../SomeComponent.jsx'