Vue.js Приоритет CSS-пакета (?) - PullRequest
Новая
       42

Vue.js Приоритет CSS-пакета (?)

0 голосов
/ 27 декабря 2018

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

У меня есть приложение Vue CLI 3 со следующим (соответствующий фрагмент) вmy main.js: 

// Bootstrap
import "@/assets/bootstrap/bootstrap.scss";
import "bootstrap-vue/dist/bootstrap-vue.css";
import BootstrapVue from "bootstrap-vue";
Vue.use(BootstrapVue);

// Toastr
import Toastr from "vue-toastr";
import "vue-toastr/dist/vue-toastr.css";
Vue.use(Toastr, {
  defaultPosition: "toast-bottom-right"
});

Запуск этого в моей среде разработчика (npm run serve) CSS работает нормально.

Когда я запускаю это после компиляции продукции (npm run build) некоторые классы ... не применяются, и я не могу объяснить, почему.Учитывая, что единственное отличие, которое я вижу, - это процесс связывания, я склонен искать проблему в этом направлении.

Я настроил связывание следующим образом (соответствующая выдержка) в моем vue.config.js:

cacheGroups: {
  icons: {
    name: "icons",
    test: /[\\/]node_modules[\\/](@fortawesome)[\\/]/,
    chunks: "all",
    priority: 3
  },
  vendors: {
     name: "vendors",
     test: /[\\/]node_modules[\\/]/,
     chunks: "all",
     priority: 1
  }
}

И, как результат, мои CSS-пакеты правильно создаются следующим образом:

  • блок vendor , который включает в себя Toaster CSS.Это включает в себя класс 'toaster' и класс 'toaster-info' (последний имеет только цвет фона)
  • a app chink, который включает в себя мой собственный встроенный загрузочный CSS.Как раз файлы начальной загрузки находятся в папке node_modules и, следовательно, они должны идти в предыдущей чинке, они попадают сюда, потому что я компилирую их как импорт в файл SASS выше, который фактически получается из кода.Сюда снова входит класс 'toaster'.

Теперь я вижу следующее:

  • оба фрагмента загружаются браузером
  • разметка правильно использует 'toastr toastr-info'
  • применяется только класс 'toaster' из приложения (начальная загрузка)
  • 'toaster' и 'toaster-info'класс полностью игнорируется браузером, и цвет фона из 'toaster-info' не применяется

Я проверил это с несколькими браузерами, чтобы исключить какие-либо специфические странности браузера.Вычисленные в браузере стили показывают, что классы «исключены» по какой-то причине, которую я не понимаю (с «исключенным» значением в дереве стилей, но зачеркнуто).

screenshot

Может кто-нибудь помочь мне понять, почему это происходит?

Спасибо.

1 Ответ

0 голосов
/ 27 декабря 2018

Это чисто проблема CSS.

Поскольку CSS вашего приложения и поставщика определяет стиль класса .toast, то, что загружается последним, присваивается самая высокая специфичность.

Я предполагаювсе, что вы пытаетесь сделать, - это изменить цвет фона .toast по умолчанию на белый (вместо черного), но вы хотите оставить более конкретные классы, такие как .toast-info, .toast-success и т. д., как они есть.

Для этого (без изменения файлов поставщика) вы можете изменить определение .toast на ... 

.toast:not(.toast-info),
.toast:not(.toast-success),
.toast:not(.toast-warning),
.toast:not(.toast-error) {
  background-color: rgba(255, 255, 255, .85);
}

Если вы используете препроцессор, такой как Sass (который, я думаю, выare), это можно записать более кратко.

В идеале файлы вендора должны были бы определять свои стили как ... 

.toast {
  background-color: #030303;
}
.toast.toast-success {
  background-color: #51a351;
}

, что давало бы "info ", " success " и т. д. определяют более высокую специфичность, чем класс .toast, но это не похоже на то, что они делают.Возможно, вы могли бы создать pull-запрос request

...