2

[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

2
  • 1
    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
    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
    Jul 24, 2020 at 4:25

1 Answer 1

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

2
  • 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.
    – noobhelp
    Jul 24, 2020 at 14:42
  • 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. Jul 25, 2020 at 3:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.