Добавление 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