configging app with lower version of NextJS [3:33pm]

[frankcollins3]

attempting to do: config component CSS with such a path as: components/ /navbar Navbar.tsx navbar.css index.js

Navbar.tsx:
1: import "./navbar.css (go back one step in the directory from Navbar.tsx which would be /navbar directory 2: navbar.css is accessible through that directory which

error: I also wonder if baseUrl hurts this because technically any relative path comes from main level.

proposed approach: 0: do it the way the app is set up. With a global styles directory in which all style-files are centralized. 1: CSS modules

[frankcollins3]

global path also doesn't work ./components/elements/navbar/navbar.css [3:43pm]

[frankcollins3]

closed: 👍 components/elements/Navbar/Navbar2.tsx // just had to import this path into the global app.tsx file

but also, looking at the exact error displayed makes a wonder of: can we do the original path setup:

components/ /navbar Navbar.tsx navbar.css index.js

and change navbar.css to navbar.scss ? might get the same answer specified for .scss but for this error message specifically it only touches on "CSS" files // sass compiling to CSS might be the reason why it doesn't fail. [3:52pm]

[frankcollins3]

surprised. that does work. [4:28pm]

[frankcollins3]

Navbar.tsx: import { connect, useDispatch } from 'react-redux' import React, { useState, useEffect } from 'react'; import Container from 'react-bootstrap/Container' 👍 import styles from "components/elements/Navbar/Navbar.module.scss"

Navbar.module.scss:

.navbarcontainer {
    display: flex;
    align-items: center;
    justify-content: space-between;  
    margin-top: 1em;
  }

  .navbarcontainer img {
    padding: 0.125em;
    height: 50px;
    width: 50px;
    margin: 0 0.25em;
    border-radius: 50%;
    border: none;
  }

  .navbarcontainer img:hover {
    border: 20px dashed #72d3fe;
    cursor: pointer;
  }

[4:29pm]

[frankcollins3]

so this works: from the directory of the component: 👍 import styles from "./Navbar.module.scss" [4:30pm]