CSS по-разному переопределяет между двумя проектами? - PullRequest
2 голосов
/ 15 мая 2019

В прошлом я в основном занимался серверной работой, но я взял на себя задачу научиться использовать Vue, и, помимо того, что я частично дальтоник, дизайн - не моя сильная сторона.Таким образом, я использую шаблон , чтобы у меня была, по крайней мере, база для начала обучения.

Странно, однако, я много раз замечал, как CSS загружается в мою копию, отличается от шаблона, и я не могу понять, почему.Проще говоря, похоже, что SASS, который я скопировал в новый проект, не переопределяет таким же образом.

Моя версия:

My Version

Шаблон проекта, прямо из GitHub:

Template project

Я могу обойти это нескольконайдя рассматриваемый CSS и добавив в конце «! Важно», хотя это выглядит довольно хакерским решением проблемы, и я бы лучше нашел настоящего виновника, хотя, возможно, это лучшее решение.

SASS был напрямую скопирован из шаблона, так что я знаю, что в этом нет ничего плохого.Моя версия и шаблон также используют Vue-CLI, который поставляется с Webpack, поэтому я не уверен, что это может быть какой-то вариацией, когда Webpack выбирает, что один файл каскадирует другой?У меня есть все те же зависимости в моем файле package.json, поэтому я знаю, что я не пропускаю некоторые важные зависимости.

Я пометил изображения Imgur в предоставленной мной ссылке, но для пояснения, я 'Мне бы хотелось, чтобы фон был прозрачным для проверки, которую я предоставил.В шаблоне прозрачный фон переопределяет белый, но когда я запускаю копию этого шаблона, белый переопределяет прозрачный.Это происходит в нескольких местах, которые я нашел, так что это не просто одна конкретная часть.

Надеюсь, у этого вопроса не так много возможностей, на которые невозможно ответить.Я просто не понимаю, что может быть не так.

1 Ответ

0 голосов
/ 15 мая 2019

Как видите, два правила CSS имеют одинаковую специфику, поэтому все вещи, равные правилу, которое идет вторым, перезапишут первое правило. В этом проекте, по сути, есть два импорта стилей: файлы Vuetify и SASS для шаблона (см. @/styles/index.scss).

Мне удалось воссоздать проблему, перемещая импорт этих двух таблиц стилей.

Чтобы получить намеченное поведение, вы должны импортировать стили, предоставленные vuetify-material-dashboard после таблицы стилей, предоставленной Vuetify.

В шаблонном проекте Vuetify импортируется первым в main.js как import './plugins'. Таблица стилей vuetify-material-dashboard, которая переопределяет стили Vuetify, импортируется в App.vue (дочерний элемент main.js).

...