Одиночное правило S CSS, показывающее «неопределенное» на сервере, но работает на локальном хосте

Question

У меня есть приложение, созданное с использованием React с Parcel. Я пытаюсь разделить код по модулям, но у меня странная проблема.

На моей домашней странице я импортирую модуль, который имеет собственный css. Когда компонент отображается на странице, есть одно единственное правило css, которое отображается как «неопределенное» в инспекторе.

Когда я запускаю это на своей локальной или на другой странице в моем приложении, например, About, правило распознается, и все работает отлично.

Я перепробовал все, что мог придумать, но я потерян, что делать дальше.

Вот код в моем js файле:

<div className={styles.content__move + " content__move"}>
  <div className={styles.columns + " columns"}>
    <div className={styles.column + " column"}>

Правило, которое игнорируется, это 'styles.columns'. Как вы можете видеть, он находится между styles.content__move и styles.column, и ОБА из них работают как положено.

При проверке я вижу это:

<div class="_content__move_31d79 content__move">
  <div class="undefined columns">
    <div class="_column_31d79 column">
      <div class="_column__img_31d79  column__img _bg4_31d79">

Но если я добавлю модуль на другую страницу, он будет корректно отображаться как:

<div class="_content__move_31d79 content__move">
  <div class="_columns_31d79 columns">
    <div class="_column_31d79 column">
      <div class="_column__img_31d79  column__img _bg4_31d79">

Чего мне не хватает ?

Answer 1

Я не уверен, в чем проблема, но я переименовал класс в JS и CSS, перестроил, и он сразу начал работать. Я бы посоветовал попробовать это, прежде чем менять стиль загрузчиков для тех, у кого такая же проблема.

Я добавил:

class="styles.columns_f" 

в JS и в S CSS:

.columns_f {...}

Запустил производственную сборку, и это было фикс.