Css каскадные слои в Visual Studio 2022
Я пытаюсь определить стек слоя css в файле custom.css проекта Blazor WASM с использованием VS 2022, но когда дело доходит до его определения, VS начинает жаловаться, что "layer" is not a known "@" directive. Это фрагмент затронутого кода:
Часть кода
Я пытался искать в Интернете решение, но ничего не нашел. Может кто сталкивался с похожей проблемой и может помочь?
Спасибо
Нет... или так кажется. CSS поставщика по-прежнему имеет приоритет над моим пользовательским.
В вопросе нет Vendor.css... Посмотрите, можете ли вы сделать простой минимально воспроизводимый пример для этого. Я думаю, что это 2 проблемы.
Нет vendor.css, но css поставщиков (Bootstrap и материалы, которые упоминаются в сообщении). Вариант использования заключается в наслоении Bootstrap и Material css, чтобы дать приоритет моим пользовательским css (app.css), которые идут последними в объявлении стека слоя. Таким образом, я мог избежать структурирования моего внутреннего CSS вокруг стороннего кода или эскалации конфликтов с искусственно высокой специфичностью или !important флагами ссылка
Тем не менее, ни VS, ни компилятор Razor не должны ничего делать с css. Предупреждения ошибочны, но безвредны, отлаживайте их из работающего приложения. Я предполагаю, что custom.css последний? Всегда добавляйте много деталей к вопросу.
Ответы 1
@H.H., ты прав. Используя свойство url правила @import и исправив некоторые неправильные относительные пути CSS, теперь это работает как шарм:
@layer vendor, blazor;
@import url('bootstrap/bootstrap.min.css') layer(vendor.bootstrap);
@import url('https://fonts.googleapis.com/icon?family=Material+Icons') layer(vendor.material-icons);
@import url('../_content/Radzen.Blazor/css/material-base.css') layer(vendor.radzen);
@import url('app.css') layer(blazor.app);
Теперь сторонний CSS многоуровневый, как и ожидалось, и мой custom.css (unlayerd) имеет приоритет.
Но работает ли это? Это только предупреждения, возможно, вы можете добавить правило подавления.