Не применяются стили

Question

Переношу кодик с vuejs на next.js. Прямо сейчас смотрю на тьюториал

Есть компонент:

import styles from './general.module.scss';

export default function Home() {
    return (
        <div className={styles.gridContainer}>
            <div className={styles.gridItemMenu}>123</div>
            <div className={styles.gridItemHead}>456</div>
            <div className={styles.gridItemContent}>789</div>
        </div>
    )
}

В этом компоненте стили лежат рядом с ним по пути: /project/path/components. Файл general.js. Стили general.module.css:

@import "../styles/text.scss";
@import "../styles/color.scss";

@import "../styles/body.css";

@import "../styles/debug.css";


.grid-item-menu {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 2;
    background: $item-color;
}
.grid-item-head {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 3;
    background: $item-color;
}
.grid-item-content {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
    background: $item-color;
}
.grid-container {
    background-color: $background-color;
    display: grid;
    height: 100vh;
    grid-template-columns: 240px 1fr;
    grid-template-rows: 140px 1fr;
    grid-gap: 7px;
    text-align: center;
}

index.js лежит в /pages:

import Head from 'next/head'
import General from '../components/general';


export default function Home() {
  return (
    <div>
      <Head>
      </Head>

      <main>
          <General></General>
      </main>
    </div>
  )
}

Возникает проблема, что при открытии браузера я вижу это:

А должен быть грид. В стилях проблем нет, так как на вью они работают. Вопрос именно в структуре и импортах. Более того, в браузере, я не вижу стилей в классах тегов:

Как решить проблему?

Answer 1

Проблема в css modules. Важно использовать camelCase в *.module.css. В таком случае, стили применяются корректно.

Пример. Было

.grid-item-menu {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 2;
    background: $item-color;
}

Стало

.gridItemMenu {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 2;
    background: $item-color;
}

Стили, которые не импортируются, писать camelCase желательно, но не обязательно.

БЛОГ НА HUSL

Не применяются стили

Ответы (1 шт):