Вызывается. МЕНЬШЕ в зависимости от условий с реакцией
Мой сайт на React.JS с компиляцией загрузчика
Я пытаюсь убедиться, когда я называю мой основной styles.less
файл в состояние variables.less
внутри, потому что я буду использовать несколько тем.
У меня не было бы темы информации, пока человек не зарегистрирован.
Снимки мне нужно иметь базовый файл с styles.less
кондиционированный variables.less
Импортировать.
Я не против сделать это.
Очевидно, я могу создать файл.LESS и добавить его для загрузки, когда у меня будет такая информация:
import 'common/styles/less/brand/orange.less';
Но это заставляет меня переписывать все стили для каждого элемента, который требует изменения цвета, фона и т. Д., Например:
@primaryColor : #FF6600;
//RESET BLUE COLOR BTN, HOVER, BORDER
a{
color:@primaryColor;
&:hover{
color:darken(@primaryColor,5%);
}
}
Будет ли такое решение? На реакции App.jsx:
import styles={default} 'common/styles/less/styles.less';
На styles.less
:
if(styles == 'default'){
@import "./variables.less";
elseif (styles == 'oranges'){
@import "./variables-oranges.less";
}
}
Любые предложения позволят избежать переписывания всего CSS, это только переменная, приветствуется, я полностью выскажу способ ее оптимизации.
С наилучшими пожеланиями!
1 ответ
Я думаю, что у вас может быть небольшое недопонимание меньше здесь. Less не предназначен для создания различных CSS-файлов на основе пользовательского ввода. Вы бы предпочли сгенерировать все комбинации заранее и предоставить файлы CSS в зависимости от условий. Вы можете сгенерировать полные файлы CSS, включая тему, или у вас может быть один общий файл CSS и дополнительные файлы CSS для тем.
Одна из возможных настроек может выглядеть так:
- common.less: ваша общая тема, которая зависит от переменных
- orangevars.less: определения переменных для оранжевой темы
- bluevars.less: определения переменных для синей темы
- orange.less: содержит только импорт в оранжевые переменные и общую тему
- blue.less: содержит только импорт в синие переменные и общую тему
После компиляции вы получите:
- orange.css
- blue.css
Для не тематического CSS-файла вы можете добавить defaultvars.less, содержащий нейтральные цвета и т. Д.
Другой подход:
- base.less: базовая (нейтральная) тема
- blue.less: синяя тема, которая добавляется поверх базы
- orange.less: оранжевая тема, которая добавляется поверх основы
Это будет генерировать:
- base.css
- blue.css
- orange.css
Здесь нет никаких переменных, только старый каскадный CSS. Хорошая мысль об этом заключается в том, что вы можете предоставить base.css еще до того, как ваш JS включится и загрузит тему. Также вы можете настроить совершенно разные аспекты темы в расширяющемся CSS. Вы не обязаны только определять переменные для предварительно определенных правил - за счет двойного обслуживания и, возможно, дублирования кода.
Этот подход также предпочтителен, если вы используете сторонние библиотеки, такие как начальная загрузка. Расширяя уровень CSS, вы все равно можете позже обновлять библиотеки, не теряя изменений.
Что вы доставляете клиенту, вы можете решить динамически (на клиенте или сервере).