Горячая перезагрузка изоляции CSS Blazor не работает

У меня есть компонент Blazor с именем Comp.razor, внутри которого вложен файл Comp.razor.css. Все эти файлы расположены в проекте библиотеки классов. В моем основном проекте (тот, из которого я запускаю приложение) я ссылался на этот компонент, и при запуске приложения все работает нормально.

Однако я столкнулся с проблемой, из-за которой я не вижу никаких изменений при изменении файла CSS и обновлении страницы. Как ни странно, если я изменяю файл HTML, изменения отражаются совершенно нормально, но это не относится к изолированному файлу CSS.

Если кто-нибудь знает, как решить эту проблему, пожалуйста, дайте мне знать. Спасибо.

ПС: Я попробовал отключить кэширование в браузере, но это не сработало. //

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

Я тестировал свое серверное приложение blazor и обнаружил, что горячая перезагрузка не работает и для изоляции CSS. Хотя в документе здесь сказано, что версия 2022 + .net 6 должна поддерживать горячую перезагрузку CSS. Боюсь, это связано с изоляцией CSS, произошедшей во время сборки

Tiny Wang 18.04.2024 06:39

вы просмотрели Learn.microsoft.com/en-us/aspnet/core/blazor/comComponents/… ?

Emre Bener 18.04.2024 08:32

@EmreBener Я сделал, но не нашел обходного пути или решения моей проблемы.

Lemon Grab 18.04.2024 11:06

как отметил @TinyWang, изоляция CSS происходит во время сборки, и созданные файлы CSS объединяются в один. Это не относится только к Blazor, и такая же проблема существует в веб-приложениях ASP.NET Core, отличных от Blazor. Объединение происходит только один раз во время сборки и все. Естественно, горячая перезагрузка не будет работать с изоляцией CSS, поскольку в настоящее время не существует механизма повторного запуска процесса. Это ограничение рамки.

Emre Bener 18.04.2024 12:30

Я столкнулся с аналогичной проблемой, когда использование Razor-компиляции во время выполнения нарушало изоляцию CSS, поэтому я условно зарегистрировал службу компиляции во время выполнения следующим образом: #if DEBUG mvcBuilder.AddRazorRuntimeCompilation(); #endif Это означает, что изоляция CSS работала только для опубликованных сборок, и мне приходилось жить без нее во время разработки, просто чтобы у меня было время выполнения. подборка бритв.

Emre Bener 18.04.2024 12:32

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

Lemon Grab 18.04.2024 12:34

Горячая перезагрузка CSS уже должна работать в Blazor. Проблема в «изоляции CSS», а это нечто иное. на самом деле изоляция CSS не обязательно является чем-то, что вам понадобится во время разработки.

Emre Bener 18.04.2024 12:39

@EmreBener хорошо, но я заметил, что всякий раз, когда я пытаюсь связать CSS, я получаю ошибку CSS не найден

Lemon Grab 18.04.2024 12:39

@EmreBener, я новичок в blazor, так что да, мне нужна вся помощь, которую я могу получить

Lemon Grab 18.04.2024 12:40

на какой CSS вы пытаетесь ссылаться? вам следует отредактировать эти данные в своем вопросе.

Emre Bener 18.04.2024 12:42

@EmreBener 1 мес, я отредактирую вопрос, чтобы было понятнее

Lemon Grab 18.04.2024 12:43

@EmreBener Я отредактировал вопрос, но чтобы ускорить его для вас, в библиотеке классов я поместил файл CSS в wwwroot, а затем связал CSS с компонентом (компонент также находится в библиотеке классов), обычно с помощью тега ссылки, но когда приложение запускается, я получаю файл CSS не найден

Lemon Grab 18.04.2024 12:47

Горячая перезагрузка не работает для изоляции CSS, но работает для обычного CSS. Если вы хотите воспользоваться преимуществами горячей перезагрузки, вам следует создать filename.css и поместить файл в wwwroot вместо component.razor.css. затем давайте свяжем файл стиля с компонентом. вот соответствующий раздел: Learn.microsoft.com/en-us/aspnet/core/blazor/comComponents/…

Tiny Wang 19.04.2024 04:47

@TinyWang Я попробовал это, но файл CSS не найден. Что вы предлагаете мне сделать?

Lemon Grab 19.04.2024 11:26

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

Tiny Wang 19.04.2024 11:35

@TinyWang, хорошо, я суммирую процесс, у меня есть два проекта в одном решении: один - основной проект, который запускает приложение, другой - библиотека классов, содержащая компонент, и в wwwroot библиотеки классов я помещаю CSS компонент там, и я связал файл CSS в компоненте следующим образом <link href = "../comComponent.css" rel = "stylesheet"> когда приложение запускается, я получаю компонент, но без стиля, а также ресурс 404 не найден

Lemon Grab 19.04.2024 11:49

@LemonGrab Боюсь, вы неправильно связали файл css, нам нужно создать ссылку на этот файл из основного приложения. Для лучшего представления, пожалуйста, позвольте мне поделиться тем, что я тестирую, в качестве ответа.

Tiny Wang 19.04.2024 12:35
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
17
158
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я создал веб-приложение blazor и RCL, затем в RCL я создал файл myStyle.css и поместил его в папку wwwroot. Затем в своем компоненте RCL я использовал этот класс.

Следуя официальному документу для ссылки на компонент, определенный в RCL, а также давайте ссылку на файл myStyle.css в приложении blazor.

Ссылка на таблицу стилей библиотеки в разметке приложения (расположение содержания).

Как вы видите, я изменил тег <head> в своем файле App.razor, и тогда он у меня сработал.

Только что у меня был тест с новым приложением .net 7 blazor server, и я обнаружил, что горячая перезагрузка изоляции css теперь работает. Я использую VS Version 17.8.3

Tiny Wang 14.05.2024 11:37

Другие вопросы по теме