Динамический импорт внутри index.js

@Fixer_84 · Регистрация: 30.04.2016

Author24 — интернет-сервис помощи студентам

Здравствуйте! Подскажите, пожалуйста, как я могу импортировать разные файлы index.css в зависимости от условия (переданного контекста переключения языка)?

Файл index.js

Javascript

import React, {useContext} from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {language} from './App'; //Импортируем контекст переключения языка сайта
 
const lang_switch = useContext(language);
require(lang_switch == 'ru' ? './index.css' : null);
 
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
 
serviceWorker.unregister();

Файл index.css

CSS

@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
 
body {
  margin: 0;
  /*
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  */
  font-family: 'Orbitron', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 
code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

Может быть, можно как-то передавать команду import по условию? Или вынести содержимое файла index.css в файл index.js. Не получается ни то, ни другое. Помогите пожалуйста. Файл index.css содержит font-family и его нужно менять для разных версий сайта (русской и английской). Если бы я мог передать условие в файл index.css. Вообщем, любое решение подойдет, только чтобы в body было прописано для русской и английской версий разные шрифты.

Добавлено через 54 минуты
Решил добавить один шрифт для обоих языков. Так даже оказалось лучше. Спасибо всем, то уделил внимание.

@drmedus · 08.01.2021, 09:55

Fixer_84, ты по-прежнему пытаешься решать задачи императивно =) Больше декларативности. Не пытайся описать "как это нужно сделать"... просто декларируй "что нужно сделать". Тебе и самому будет проще и другим будет легче понимать что ты имел ввиду в коде.

Таблицы css не нужно подключать по условию. Подключи одну. И в этой одной таблице опиши два класса - с одним шрифтом и с другим. И по условию прокидывай в компонент либо один класс либо другой.
Еще более универсальным способом будет не использовать .css вовсе. А заюзать например styled components.

@drmedus 27 / 22 / 6 Регистрация: 13.12.2012 Сообщений: 159
	08.01.2021, 09:55	2
	Fixer_84, ты по-прежнему пытаешься решать задачи императивно =) Больше декларативности. Не пытайся описать "как это нужно сделать"... просто декларируй "что нужно сделать". Тебе и самому будет проще и другим будет легче понимать что ты имел ввиду в коде. Таблицы css не нужно подключать по условию. Подключи одну. И в этой одной таблице опиши два класса - с одним шрифтом и с другим. И по условию прокидывай в компонент либо один класс либо другой. Еще более универсальным способом будет не использовать .css вовсе. А заюзать например styled components. 1