Как выделить / охватить глобальный CSS в VUE - PullRequest
Новая
       59

Как выделить / охватить глобальный CSS в VUE

0 голосов
/ 28 февраля 2019

Контекст: У меня есть проект Vue CLI, состоящий из двух основных частей: 1) то, что видят клиенты, и 2) то, что видит администратор.Клиентская часть использует Bootstrap CSS, а другая - Vue Material. Несмотря на то, что я планирую переписать часть материала Vue в Vuetify, проблема, скорее всего, сохранится.

Проблема: Bootstrap CSS конфликтует с VueМатериал CSS.Когда Bootstrap CSS применяется к разделу Vue Material, он выглядит испорченным.И наоборот.Когда CSS Vue Material применяется к разделу Bootstrap, он выглядит испорченным.

Есть ли какой-нибудь способ, которым я мог бы сделать эту работу?

Этот проект Vue раньше был инкапсулирован в проекте Laravel, интенсивно используя Laravel Mix.Затем я мог бы использовать файл микширования для компиляции всего Bootstrap CSS в один пакет.На этот пакет ссылаются на странице индекса, используя следующую строку: 

<link rel="stylesheet" href="bootstrap-bundle.css" id="bootstrap-stylesheet">
<link rel="stylesheet" href="vue-material-bundle.css" id="vue-material-stylesheet">

Используя два компонента макета в Vue, я мог бы затем переключать таблицы стилей следующим образом: 

// The Bootstrap layout component:
created() {
  document.getElementById('bootstrap-stylesheet').disabled = false;
  document.getElementById('vue-material-stylesheet').disabled = true;
}


// The Vue-Material layout component:
created() {
  document.getElementById('bootstrap-stylesheet').disabled = true;
  document.getElementById('vue-material-stylesheet').disabled = false;
}

Возможно, это не очень хорошее решение, но оно работает.Также работает в большинстве браузеров.

Однако теперь я использую Vue CLI вместо Laravel & Laravel Mix.Это означает, что я больше не могу назвать сгенерированный вывод так просто.

Я уже пробовал использовать глубокий селектор CSS: /deep/ & >>>.Но это работает не полностью, так как bootstrap также устанавливает стили для элементов :root, html & body.Поэтому при использовании глубокого селектора в CSS с областью видимости эти стили не применяются, потому что конечный результат будет выглядеть примерно так: 

.customers-container {
    body {
        // bootstrap adds style to the body
    }
}

Выше не работает, потому что тело не является потомком customers-container но наоборот.

Я чувствую, что может быть решение с использованием имен пакетов или имен чанков или чего-то еще из конфигурации Webpack или Vue.Но моих знаний в Webpack недостаточно, чтобы решить это самостоятельно, и я не могу найти ответ в Интернете.

1 Ответ

0 голосов
/ 28 февраля 2019

Первое, что приходит мне в голову, - это просто загрузить таблицы стилей начальной загрузки и vue-material.Затем вы можете попробовать выполнить следующее, взять таблицу стилей начальной загрузки и обернуть ее в нечто вроде: 

.administrator-view {

/// the complete bootstrap stylesheet

}

Сделайте то же самое с материалом vue, но с классом клиента .customer-view

Затем вы можете добавить один из этих классов в элемент HTML или body при каждом переключении между представлениями.

Не забудьте включить обе таблицы стилей!

РЕДАКТИРОВАТЬ: выполнил поиск на сайте, вы должны проверить Ограничить область применения стилей начальной загрузки

...