ServiceWorker несколько файлов SCSS для динамического требования в React

Question

Я искал вокруг, но не могу найти ответ на этот вопрос. Мне удалось динамически загрузить необходимые файлы scss для приложения create-реакции-приложения, чтобы иметь светлый и темный режимы. Я использую ванильный фреймворк с React.js и делаю следующее в app.js

useEffect(
() => {
  console.log('use effect')
  if (cookies['mode'] === 'light' || cookies['mode'] === 'dark') {
    console.log('cookies_mode: '+cookies['mode'])
    setUiMode(cookies['mode'])
  } else {
    console.log('cookies_mode: light')
    setUiMode('light')
  }

  if (uiMode === 'light') {
    require('./app.scss')
    setNavBgColor('#FFF')
    setNavFgColor('#111')
  } else {
    require('./app-dark.scss')
    setNavBgColor('#080808')
    setNavFgColor('#FFF')
  }
},
[cookies, uiMode]

)

, и после перезагрузки используется правильная таблица стилей. Это прекрасно работает на сервере разработки (то есть запуск npm), но когда я собираю его с помощью npm run build, а затем обслуживаю его, весь сайт работает нормально, за исключением возможности переключения режимов, поэтому он всегда остается в темном режиме .. Очень странно, потому что куки устанавливаются правильно. Может ли это быть из-за того, что работник службы включен, и он кэширует мою таблицу стилей, даже если она имеет другое имя?

Код в моем github: https://github.com/averageflow/joes-software

Не знаю, помогает ли это, но вот как он переключает темы:

function toggleUIMode () {
if (uiMode === 'dark') {
  setCookie('mode', 'light', { path: '/' })
  setUiMode('light')
  window.location.reload(false)
} else {
  setCookie('mode', 'dark', { path: '/' })
  setUiMode('dark')
  window.location.reload(false)
}
console.log('set ui mode to')
console.log(uiMode)

}