Why is create react app not importing a css file?

Question

[enter image description here][1]Problem: no CSS in output.

Methods tried to fix:

1. renaming styles.css to styles.module.css -- fail
2. manual load Webpack in terminal even though it shouldn't need it with create-react-app -- fail
3. Tried the syntax - import styles from ./styles.module.css ; - and also just import./styles.module.css ; and import styles.module.css ; -- fail

So I've been googling for hours and nothing has seemed to do the trick. A link is provided with what the code. when it runs, the terminal clearly says line 4 is defined but never used as is evident by the greyed out line in visual studio code.

https://i.stack.imgur.com/X4PdW.png https://i.stack.imgur.com/cdKYB.png

I appreciate any help. Thank you in advance

Answer 1

What i have seen you did was import styles from "./styles.module.css" but not used styles

As well as import "./styles.module.css" not sure this will work as well because your styles will be scoped. (This i did not test it is just assumption)

This is from create react app docs

import React, { Component } from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles
import './another-stylesheet.css'; // Import regular stylesheet
class Button extends Component {
  render() {
    // reference as a js object
    return <button className={styles.error}>Error Button</button>;
  }
}

If you add module in file name of styles.

Use import styles from './Button.module.css'; and then use styles to access content in file something like styles.[class-name-from-Button.module.css]

If you just have Button.css just call import './Button.css'; somewhere on top, do not add module in between Button and css