изменения стилей порядка импорта (s css и bootstrap) при импорте с отложенной загрузкой - PullRequest
Новая
       8

изменения стилей порядка импорта (s css и bootstrap) при импорте с отложенной загрузкой

1 голос
/ 11 февраля 2020

Я пытаюсь добавить в проект вторую тему, лениво загружая файлы стилей на основе условия в ThemeSelector. js, и, как следствие, меняется порядок стилей, всегда bootstrap импортируется последним, и я не могу переопределить это в файлах scss / css без! важное, как я могу заставить его соблюдать порядок импорта?

ThemeSelector. js: 

import React, { Suspense, Fragment, lazy } from 'react'

const Theme1 = lazy(() => import('./themes/Theme1'))
const Theme2 = lazy(() => import('./themes/Theme2'))
const condition = ...

const ThemeSelector = ({ children }) => {
   return (
    <Fragment>
      {/* Conditionally render theme based on condition */}
      <Suspense fallback={null}>
        {!condition && <Theme1 />}
        {condition && <Theme2 />}
      </Suspense>
      {children}
    </Fragment>
  )
}

export default ThemeSelector

index. js

import...
import...
import ThemeSelector from 'styles/ThemeSelector'
import App from './App'

...
...
ReactDOM.render(
    <ThemeSelector>
      <App />
    </ThemeSelector>,
  document.getElementById('root'),
)

Theme1. js

import '../../theme1.css'
const Theme1 = () => null
export default Theme1

Theme2 . js

import '../../theme2.css'
const Theme2 = () => null
export default Theme2
...