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

Javascript – React – Css/Scss File can't be import in my jsx file

import error
files location
errors showed in browser
Scss file

I couldn’t manage to import my CSS file even though I already download the required node modules.

Also I change and try module

I tried to import the CSS file in my React component, though the existing CSS/SCSS file is not working when I import it.

Tags:

2

Answers


  1. 0

    Welcome to Stack Overflow!

    It seems you are importing the wrong file. CardBorder.scss should be named CardBorder.module.css to match your actual import.

    Login or Signup to reply.
  2. 0

    I think that this is what you’re trying to do, even if the blog is about tailwind.

    // Navigation.styles.js
export default {
  nav: 'container',
  ul: [
    'flex',
    'flex-col',
    'justify-end',
    'list-none',
    'sm:flex-row',
  ].join(' '),
  li: [
    'mb-3',
    'sm:ml-3',
    'sm:mb-0',
    'even:bg-gray-50',
    'odd:bg-white',
  ].join(' '),
  a: ({ isActive }) =>
    [
      'text-black',
      'font-bold',
      'inline-block',
      'rounded-full',
      'bg-yellow-400',
      'py-1',
      'px-3',
      isActive ? 'text-white' : 'hover:bg-yellow-500',
    ].join(' '),
}

    Usage:

    // Navigation.jsx
import styles from "./Navigation.styles";

const Navigation = ({ links }) => {
  const router = useRouter()
  return (
    <nav className={styles.nav}>
      <ul className={styles.ul}>
        {links.map((link, index) => {
          const isActive = router.pathname === link.path
          return (
            <li key={index} className={styles.li}>
              <a className={styles.a({ isActive })} href={link.path}>
                {link.name}
              </a>
            </li>
          )
        })}
      </ul>
    </nav>
  )
}

    Source: Simple strategy for structuring classnames

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

Back To Top
Search