Question 53888 in Javascript Question posted in
A very good W3school tutorial can be found here.

import styles not working in a basic JavaScript file

We are upgrading a project from React 16 to React 18.2 (it is a difficult challenge).

One JavaScript file that was working before is not working now.

The file contains a simple import:

import styles from './toolbar.css';

toolbar.css contains basic styling:

div.toolbar-container{
    position: absolute;
    top: 30px;
}

and some other stuff.

These styles are applied in the toolbar.js file:

 $('body').append(
                '<div class="toolbar-container"><ul class="menubuttons" style="display: none;">' +

console.log(Object.keys(styles));  //shows "length: 0"

So for some reason a simple import that was working is no longer working.

Any suggestions as to why?

Tags:

2

Answers


  1. 0

    You can try to import stylings as below

    import './toolbar.css';

    Login or Signup to reply.
  2. 0

    You cannot import CSS files in javascript.

    import retrieves the export from the js/ts file you request.
    CSS is a stylesheet and doesn’t contain readable code for javascript.

    I do not know much about react, but you can create a <style> element to the values of the CSS file, or create a <link href=""> element to your .css file.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search