Как вы можете создать приложение ASP.NET MVC и использовать Sass для стилизации без хлопот, связанных с веб-пакетом или ворчанием.
Вступление
Шаблон ASPNET MVC по умолчанию поставляется с Bootstrap 4 из коробки. Это уже скомпилированная версия Bootstrap. Чтобы настроить внешний вид элементов Bootstrap, вам необходимо иметь возможность переопределить значения Bootstrap по умолчанию и скомпилировать Bootstrap из исходного кода Sass. По собственному опыту я знаю, что люблю использовать исходные файлы Sass и перезаписывать их.
К сожалению, использовать Sass в приложении MVC не так просто, как кажется. Есть несколько руководств, в которых используется webpack или grunt. Но для меня это кажется излишним. Почему мы не позволяем нашему приложению MVC делать всю тяжелую работу? Поскольку я не нашел никаких руководств по этой проблеме, я решил сделать это сам.
Цели
Наши цели:
- Создать пример приложения
- Добавить Sass в проект
- Скомпилируйте Sass в CSS
В качестве примера проекта я хотел бы отослать вас к этому моему проекту GitHub: https://github.com/koenvzeijl/sass-aspnet-mvc
Предположения
В этой статье предполагается следующее:
- Node.js установлен. Если у вас его нет, сначала установите.
- Вы используете IDE, которая может запускать приложение ASP.NET MVC, например Visual Studio или Rider.
Создать пример приложения
Прежде чем мы начнем со всеми настройками, нам нужно создать пример приложения. У вас есть два варианта сделать это: вы можете сделать это через командную строку или создать в своей любимой среде IDE. В этом примере проекта я буду использовать приложение .NET 5.0 MVC.
Чтобы создать приложение MVC из командной строки, используйте следующую команду:
dotnet new mvc --name ExampleApplicationЧтобы создать пример приложения с помощью Visual Studio, выполните следующие действия:
- Откройте Visual Studio
- Щелкните «Создать новый проект».
- Выберите «Веб-приложение ASP.NET Core».
Затем выберите версию .NET Core в раскрывающемся списке и нажмите «Создать».
Теперь, когда у нас есть пример приложения, пора добавить наши стили Sass. В этом примере мы будем использовать папку /Styles для всех файлов the.scss. Для начала создайте site.scss, который будет базовым файлом для нашего проекта. В моем примере проекта базовый файл выглядел так:
Использование NPM
Пришло время настроить Sass для нашего проекта. Несмотря на то, что мы программируем приложение MVC, мы собираемся использовать Node Package Manager (npm) для установки компонентов, необходимых для Sass. Для этого мы добавим пакеты в package.json. Этот файл необходимо добавить в корень проекта, и это можно сделать, выполнив следующую команду в командной строке.
npm initТеперь, когда у нас есть package.json, самый простой способ установить все наши пакеты сразу - это добавить все эти пакеты как devDependencies, а затем запустить npm install:
{
"autoprefixer": "^10.2.6",
"cssnano": "^5.0.5",
"cssnano-preset-advanced": "^5.1.2",
"postcss-cli": "^8.3.1",
"sass": "^1.34.1"
}
Настройка postcss
Еще нам нужно настроить наши настройки postcss. Для этого первое, что нам нужно сделать, это добавить еще одну строку в наш package.json:
"main": "postcss.config.js"
Эта строка обязательно проверяет файл postcss.config.js для настройки postcss. Для получения дополнительной информации об основном объекте package.json перейдите по этой ссылке.
Теперь создайте postcss.config.js со следующим содержимым:
Это гарантирует, что автопрефиксатор будет работать так, как мы ожидаем от старых браузеров. Для этого потребуется cssnano.
Теперь, когда мы почти закончили, нам нужно добавить несколько скриптов в наш package.json, чтобы наше приложение MVC могло фактически сгенерировать файлы .css.
Готовый package.json должен выглядеть примерно так:
Это все, что нам нужно для настройки NPM, давайте перейдем к нашему веб-приложению.
Настройте приложение MVC
В нашем веб-приложении мы хотим достичь двух вещей, чтобы сделать разработку максимально приятной. Прежде всего, мы хотя бы хотим убедиться, что .scss файлы преобразованы в .cssfiles. Во-вторых, чтобы немного облегчить нашу жизнь как разработчиков, мы хотим, чтобы наше приложение автоматически генерировало файлы .css, если в файлах .scss что-то изменится.
Как уже говорилось, мы сначала хотим убедиться, что файлы .css сгенерированы. Для этого нам нужно добавить следующие строки в наш .csproj файл:
В приведенном выше фрагменте кода мы добавили две задачи. Первая задача - убедиться, что правильные пакеты установлены с помощью npm перед сборкой вашего проекта. Это особенно полезно при работе с несколькими людьми над одним проектом или при создании конвейера CI / CD, поскольку им не нужно запускать npm install вручную. Этот фрагмент кода будет работать как для Linux, так и для Windows.
Вторая часть преобразует .scss файлы в .css файлы с использованием сценария build:css, который мы добавили в наш package.json ранее. Этот сценарий просмотрит папку /Styles, которую мы создали ранее, и сгенерирует соответствующие файлы .css в папке wwwroot/css.
После выполнения скрипта он также скопирует файл site.css в папку публикации, чтобы автоматически включить его.
Следите за изменениями в Sass
Как уже упоминалось чуть ранее, мы хотим максимально упростить разработку для себя. Мы хотим, чтобы наше приложение автоматически генерировало файлы .css, если что-либо изменяется в файлах .scss. Во-первых, нам нужно создать наблюдатель за файлами. Для этого создайте NpmWatchHostedService.cs в корне вашего проекта со следующим содержимым.
Приведенный выше фрагмент кода в режиме отладки настроит средство отслеживания файлов с помощью npm и сгенерирует .css файлы, если что-либо в папке /Styles изменится. Теперь осталось только включить NpmWatchHostedService в наш startup.cs, сделайте это, добавив следующие строки:
Заключение
Вот и все! Вы сделали это. Вы успешно добавили Sass в свое приложение ASP.NET MVC без использования webpack или Grunt. Теперь упростите себе жизнь и начните писать Sass вместо CSS. Я надеюсь, что вы кое-что узнали из этой истории.
Удачного кодирования 😊
Для примера проекта:
