Почему не работают стили?

Question

[souhhhhh]

import { Link } from 'react-router-dom';
import { classNames } from 'shared/lib/classNames/classNames';
import cls from './Navbar.module.scss';

interface NavbarProps { 
  className?:string
}

export const Navbar = ({className}: NavbarProps) => {
  return (
    <div className={classNames(cls.navbar, {}, [className])}>
        <div className={cls.links}>
          <Link to={'/'} className={cls.mainLink}>Главная</Link>
          <Link to={'/about'}>Вторая страница</Link>
        </div>
    </div>
  )
}

Файл scss:

.navbar { 
    width: 100%;
    height: var(--navbar-height);
    background: var(--inverted-bg-color);
    display: flex;
    align-items: center;
    padding: 20px;
}


.links { 
    margin-left: auto;
}

.mainLink { 
    margin-right: 15px;
}

Cannot read properties of undefined (reading 'navbar') at Navbar (Navbar.tsx:18:58). Выдает такую ошибку

Comments

[Rerurk]

Попробуйте поставить на импорте стилей @ts-ignore
Среда разработки какая?

[souhhhhh]

Rerurk, visual studio code

[Rerurk]

@ts-ignore
import cls from './Navbar.module.scss';
Не помогло?

[Aetae]

Во-первых: точно ли там большая буква первая Navbar? А то винде пофигу на рeгистр, а в линухе упадёт.(на самом деле разница в фс, но не суть)
Во-вторых: точно ли есть файл './Navbar.module.scss' в той же папке что и файл компонента?
В третьих: сделай так и посмотри, что напишет в консоль:

import * as all from './Navbar.module.scss';
console.log('all', all);

[souhhhhh]

Aetae, Да, вроде написано через Navbar. Файл есть, в консоль выводит:

all 
Module
default
: 
(...)
links
: 
(...)
mainLink
: 
(...)
navbar
: 
(...)
__esModule
: 
true
Symbol(Symbol.toStringTag)
: 
"Module"
get default
: 
() => (__WEBPACK_DEFAULT_EXPORT__)
get links
: 
() => {…}
get mainLink
: 
() => {…}
get navbar
: 
() => {…}
[[Prototype]]
: 
Object

[Aetae]

souhhhhh, разверни default

[Антон]

1. Убедитесь, что файл `Navbar.module.scss` находится в той же директории, что и файл `Navbar.tsx`.

2. Проверьте, что у вас правильно настроен webpack или другой бандлер для обработки CSS-модулей. Убедитесь, что расширение `.scss` обрабатывается корректно.

3. Попробуйте изменить импорт стилей на: import * as cls from './Navbar.module.scss';

[WbICHA]

Rerurk, каким образом ему хотя бы в теории может помочь игнор тса, когда у него рантайм ошибка?

[souhhhhh]

Антон, Последнее помогло, спасибо!