Добавление Sass в Blazor с изоляцией CSS с помощью всего одной строчки кода

Простой метод «установил и забыл» с dart-sass и .net5.0

Почему этот метод лучше других руководств?

  • Здесь используется dart-sass, официальная реализация sass, что означает все последние функции и исправления ошибок, в отличие от других руководств и расширений VS, которые почти все используют либо node-sass, либо libsass (оба из которых теперь устарели)
  • Очень просто. Просто введите одну строчку кода и больше никогда к ней не прикасайтесь.

Перед тем, как начать:

  • Убедитесь, что у вас установлен node.js
  • Убедитесь, что в вашем проекте Blazor запущен .net5.0 (для изоляции CSS)

Если вы создаете новый проект, вы можете легко изменить цель в раскрывающемся списке при создании приложения Blazor.

Если вы переходите с существующего приложения Blazor, следуйте этому руководству

Базовая установка

Важно установить dart-sass, а не libsass или любую другую реализацию.

Мы можем настроить SASS с помощью NPM. Откройте окно cmd / powershell и запустите

npm i -g sass

Это установит dart-sass глобально, а также добавит sass в переменные среды окна, что позволит вам запускать его в командной строке.

Настройка проекта

Теперь давайте добавим в проект немного дерзости! Я сделаю это простым для руководства, но любая архитектура SASS подойдет. Здесь я добавил папку Styles, а затем добавил variables частичный файл (перейдите сюда, чтобы узнать больше о SASS)

Изоляция CSS

Добавить изоляцию CSS также довольно просто: просто создайте файл SASS в той же папке, что и файл razor, сохраняя то же имя файла и добавляя после него .scss. (пример ниже) VS должен автоматически поместить этот файл в файл razor.

Ну, а как мне получить доступ к другим таблицам стилей sass и сослаться на них?

Например, мы все еще можем получить доступ к таблице стилей переменных, которую мы определили ранее. Просто напишите эту строку в любом scss-файле, как если бы вы были в папке Styles.

@use 'variables' as v;

(Я объясню более подробно, как и почему это работает ниже)

Магия

Наконец, давайте добавим одну строку кода, которая все скомпилирует.

Поместите строку ниже в сценарий предварительной сборки вашего проекта (щелкните правой кнопкой мыши проект, свойства, события сборки)

sass Styles:wwwroot/css Pages:Pages Shared:Shared --style compressed --load-path=Styles --update

Более подробно, как это работает, вы можете узнать на сайте SASS, но вкратце объясните:

  • В этой части Styles/main.scss:wwwroot/css/main.css указано sass, где искать файлы sass / scss. Он экспортирует все, что находится в папке styles, в wwwroot/css
  • Pages:Pages Shared:Shared просто находит все файлы в папках Pages и Shared и экспортирует их в ту же папку. (это также работает со всеми подпапками внутри папок)
  • --style compressed сообщает sass о необходимости минимизировать файл,
  • --load-path=Styles указывает sass загрузить папку Styles. Это позволяет вам получить доступ ко всему внутри этой папки, где угодно, используя @use или @import
  • --update указывает sass компилировать только те файлы, которые изменились с момента последней компиляции

Теперь просто создайте проект и посмотрите, как происходит волшебство.

Необязательно: адаптация разработчика

Если вы работаете с другими разработчиками, было бы неплохо сообщить им, что для запуска проекта им нужен установленный sass. Добавьте это в csproj прямо перед вашим сценарием предварительной сборки:

<Target Name="SassCheck" BeforeTargets="PreBuild">
<Exec Command="sass --version" ContinueOnError="true">
<Output TaskParameter="ExitCode" PropertyName="ErrorCodeSass" />
</Exec>
<Error Condition="'$(ErrorCodeSass)' != '0'" Text="Dart-sass is required for this project. Install globally with 'npm i -g sass' " />
</Target>

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

Некоторые предостережения

  • Visual Studio, похоже, не имеет новейших функций sass для intellisense. (По крайней мере, насколько мне известно - дайте мне знать, если я ошибаюсь) Такие функции, как @use, будут отображаться с предупреждениями (но все равно компилируются нормально).
  • Sass будет компилироваться только при сборке, однако изоляция CSS в любом случае компилируется только при сборке, поэтому это не должно слишком сильно влиять на разработку.

И это все! На мой взгляд, это простейший способ интеграции sass в проект Blazor. Спасибо за чтение :)

Вы можете найти пример кода здесь: https://github.com/codelastnight/BlazorSCSSIsolated