Webpack не соблюдает порядок импорта - PullRequest
Новая
       10

Webpack не соблюдает порядок импорта

0 голосов
/ 02 мая 2018

В настоящее время мы работаем с 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;
}

Однако, когда я перемещаю дизайн в проект, используя реагировать, а веб-пакет только при загрузке переопределяет все.

Я пытался: 

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, но, например, мы полностью изменили ввод данных формы, но они просто отображаются в качестве начальной загрузки по умолчанию.

Ответы [ 2 ]

0 голосов
/ 08 мая 2018

Можете ли вы попробовать импортировать Bootstrap из файла creative.css? Я думаю, что это позволит Webpack правильно оформить заказ, тогда как при использовании import в JS для импорта CSS это не определяет строгий порядок.

* 1005 Е.Г. *

index.js 

import './css/creative.css'

creative.css 

@import url('./bootstrap.css');
...your custom css...
0 голосов
/ 02 мая 2018

Вы можете переопределить 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;
}

Надеюсь, это решит вашу проблему. Пожалуйста, попробуйте.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...