Unknown file extension ".css"

trying to run a node JS project and keep getting this error that it doesnt recognise the CSS?

is this normal?

node:internal/errors:484
ErrorCaptureStackTrace(err);
^

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension “.css” for /home/runner/TrickyIntentArchives/style.css
at new NodeError (node:internal/errors:393:5)
at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:79:11)
at defaultGetFormat (node:internal/modules/esm/get_format:121:38)
at defaultLoad (node:internal/modules/esm/load:81:20)
at nextLoad (node:internal/modules/esm/loader:163:28)
at ESMLoader.load (node:internal/modules/esm/loader:605:26)
at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22)
at new ModuleJob (node:internal/modules/esm/module_job:63:26)
at #createModuleJob (node:internal/modules/esm/loader:480:17) {
code: ‘ERR_UNKNOWN_FILE_EXTENSION’
}

Node.js v18.12.1
repl process died unexpectedly: exit status 1

there’s nothing particularly weird about the .css

/* style.css */

body {
  background-color: #111;
  color: #fff;
  font-family: "Georgia", serif;
  text-align: center;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#prompt-container {
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 0;
  text-align: left;
}

#haiku-container {
  font-size: 2rem;
  margin-top: 2rem;
  text-align: left;
}

#haiku-container span {
  cursor: pointer;
  transition: color 1s;
}

#haiku-container span.fade-out {
  color: #000;
  transition: color 1s;
  opacity: 0;
}

#error-container {
  font-size: 1.2rem;
  margin-top: 1rem;
}

.clicked {
  cursor: default !important;
}

the html also seems to call it normally

  <head>
    <meta charset="utf-8">
    <title>name of thing </title>
<link rel="stylesheet" href="./style.css">
  </head>

any clues as to whats happening here?

also this is my index.js

// index.js
import { generateHaiku } from './generator.js';
import './style.css'; 
import { setupInteraction } from './interaction.js';

setupInteraction();
1 Like

You cannot import css from js, that is not how it works.

6 Likes

Hey @GuiSeiz! Welcome to the community!

If you want to import the classes from the .css file, you just need to link the stylesheet (which you have already done.

Then just create an element with the class attribute you want to use.

5 Likes

oh :melting_face: oops

Thank you!

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.