Webpack не соблюдает порядок импорта
В настоящее время мы работаем с Webpack и React, используя Bootstrap для дизайна и настраиваемый CSS / SASS, который переопределяет некоторые стили начальной загрузки.
На простой HTML-странице мы используем:
<!-- Custom styles for this template -->
<link href = "./../../css/creative.css?v=1.9" rel = "stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
Наш стиль переопределяет бутстрап, например наш <hr>
показан тот, который определен в нашем creative.css
hr {
max-width: 50px;
border-width: 3px;
border-color: #F05F40;
}
Однако, когда я перемещаю дизайн в проект с помощью react и webpack, только bootstrap все переопределяет.
Я пытался:
import './css/creative.css'
import './css/bootstrap.css'
А также:
import './css/bootstrap.css'
import './css/creative.css'
Также попытался обернуть app.js в index.js и стилизовать родительский элемент, а затем дочерний элемент следующим образом:
index.jsx:
import './css/bootstrap.css'app.jsx:
import './css/creative.css'
также попробовал другой способ:
index.jsx:
import './css/creative.css'app.jsx:
import './css/bootstrap.css'
Но мой собственный стиль никогда не отменяет стиль начальной загрузки.
Это происходит не только для HR, но, например, мы полностью изменили стиль входных данных формы, но они просто отображаются как начальные по умолчанию.
@CuriousSuperhero, да, я уверен
Это зависит от порядка, в котором таблицы стилей были связаны в теге <head> ... </head>. Если вы можете предоставить образец репозитория, я могу помочь вам решить проблему.
Скорее всего, вам следует изменить порядок тегов <link /> на странице html. Вы уверены, что ваш собственный стиль, который вы даете, имеет больше возможностей в определении элементов. Вам, вероятно, следует подумать о том, чтобы присвоить вашим элементам имена классов, которые вы хотите стилизовать для себя и указать более точные цели в CSS. например. hr.my-own-class, и ваш стиль победит бутстрапы по умолчанию. Если вы просто объявляете много целей hr, побеждает последний. И этот вопрос, кстати, совершенно не связан с React.
@SuhasV Это проект под соглашением о неразглашении, поэтому я не могу раскрыть какой-либо код.
@JimiPajala Да, я уверен, что мой стиль лучше, чем аттракционы, поскольку у меня более 30 страниц, разработанных в HTML с его использованием, и все они работают нормально.
Ответы 2
Вы можете переопределить bootstrap.css с помощью creative.css, выполнив следующий шаг.
Шаг 1.
Установить root id<body id = "bootstrap-overrides">
Шаг 2. Выполните следующие изменения в creative.css. Вам просто нужно установить префикс для любого селектора CSS с вашим идентификатором («bootstrap-overrides»), как показано ниже.
#bootstrap-overrides h1
{
margin-top: 10px;
margin-bottom: 0.5rem;
}
Надеюсь, это решит вашу проблему. Пожалуйста, попробуйте.
Пожалуйста, попробуйте с! Important. Раньше какая-то опечатка с моей стороны
Я знаю про !important, но здесь речь не идет о 10 линиях. собственный CSS занимает более нескольких тысяч строк. кроме того, !important не следует использовать
Это противоположно тому, что я ищу, он спрашивает, как убедиться, что бутстрап перекрывает все остальное.
@Mederic Я только что обновил свой ответ, и он работает так, как вам нужно. Пожалуйста, проверь это. Я рад, если это сработает для вас.
@ Медерик, ты это проверил.
Как уже упоминалось, я не могу просто взломать свой способ, переименование более 10 000 строк решения css WildService было намного чище.
Можете ли вы попробовать импортировать Bootstrap из файла creative.css? Я думаю, что это позволит Webpack правильно определить порядок, тогда как при использовании import в JS для импорта CSS он не определяет строгого порядка.
Например.
index.js
import './css/creative.css'
creative.css
@import url('./bootstrap.css');
...your custom css...
Хорошая идея, я не думал об этом, я полностью попробую и вернусь к вам. Я бы подумал, что пока async в неуказанном JS загрузит его по порядку.
Вы уверены, что бутстрап не импортируется ни в один другой файл вашего проекта?