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:

renaming styles.css to styles.module.css -- fail
manual load Webpack in terminal even though it shouldn't need it with create-react-app -- fail
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.sstatic.net/X4PdW.png https://i.sstatic.net/cdKYB.png

I appreciate any help. Thank you in advance

create-react-app should have CSS working out of the box w/o need to mess with Webpack. Can you paste your file directory, and code where you're importing css — Hyetigran
– Hyetigran, Commented Jul 23, 2020 at 23:33
won't let me post a pic directly but I added the link that was supposed to be at the bottom of the post and wasn't. My apologies, I thought it was already attached. — noobhelp
– noobhelp, Commented Jul 24, 2020 at 4:25

pavlovic265 · Accepted Answer · 2020-07-24 04:48:47Z

2

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

answered Jul 24, 2020 at 4:48

pavlovic265

4912 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

noobhelp Over a year ago

ok so styles.[class-name-from-Button.module.css] worked to apply the setting to that specific classname, which is great. Thanks a TON! Is there not a way to apply the CSS across the file though with just the classname? So every time I have to write - className={styles.className} instead of className='className' ? I ask because I have -- html { font-size: 10px; } * { box-sizing: border-box; } in css that needs to be applied across the entire file and I'm not sure I know how to do that.

pavlovic265 Over a year ago

That would be something like global styles. So you can have file in your src/global.css folder, but do not add module name, and just use import ./global.css in your src/index.css. The styles from global.css would be applied everywhere.

Collectives™ on Stack Overflow

Why is create react app not importing a css file?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related