Создание приложения Angular с помощью Angular CLI позволяет выбрать формат таблицы стилей: CSS (по умолчанию), SCSS, SASS, LESS и Stylus.

SASS - это препроцессорный язык сценариев, который интерпретируется или компилируется в каскадные таблицы стилей (CSS), которые имеют два синтаксиса ： новый синтаксис SCSS и традиционный синтаксис SASS.

Использование языка препроцессора, такого как SCSS, позволяет пользователям применять сложные и гибкие тактики, такие как переменные, вложение, миксины, наследование. С помощью SCSS вы можете легко настроить иерархию стилей своего приложения Angular с глобальными переменными, миксинами и модулями и использовать их в любой таблице стилей с @import.

В этом посте я дам вам пошаговое руководство по обновлению вашего Angular с формата стилей CSS по умолчанию до SCSS. Порядок этого руководства показан ниже:

Основы:

  1. Создайте новый Angular с таблицей стилей CSS по умолчанию
  2. Обновить схему конфигурации Angular
  3. Переименуйте все файлы .css в .scss и styleUrls компонента.

Передовой:

4. Настройте иерархию таблиц стилей SCSS.

5. Используйте Bootstrap SCSS.

Вы можете скачать код из моего репозитория на Github: angular-scss.

1. Создайте новое приложение Angular через Angular CLI.

Выполните команды Создайте новый проект angular с компонентами

ng new angular-scss 
cd angular-scss
ng g component scss-sample

Обновите app.component.html

<app-scss-sample></app-scss-sample>

Запустите приложение Angular с помощью команды ng serveи open localhost:4200

2. Обновите схему конфигурации Angular.

Выполните следующую команду под корневым путем приложения Angular:

ng config schematics.@schematics/angular:component.styleext scss

После этой команды вы увидите эти изменения ниже в своем файле angular.json:

"schematics": {
   "@schematics/angular:component": {
      "styleext": "scss"
   }
}

3. Переименуйте файлы .css в .scss & Components ’styleUrls.

3.1 Удалить / node_modules / папку

Запустите rm -r -f node_modules, чтобы удалить папку node_modules и все файлы в ней. Это предотвратит любое возможное переименование в файлы .css в ваших node_modules.

3.1. Создайте rename.sh под корневым путем вашего приложения Angular

Запустите vim rename.sh и скопируйте код переименования ниже

#!/bin/bash
for file in $(find . -name "*$1"); 
do
  mv "$file" "${file%$1}$2"
done

Введите esc и :wq, чтобы записать и сохранить этот файл.

Запустите ./rename.sh .css .scss под корневым путем приложения, чтобы переименовать все файлы .css в файлы .scss.

3.3 Обновление styleUrls компонентов

Замените styleUrls компонентов с * .component.css на * .component.scss.

В Visual Studio Code вы можете использовать Crtl+Shift+H в Windows или Cmd+Shift+F в MacOS для глобальной замены .component.css на .component.scss

3.4 Обновление массива стилей в файле angular.json

Откройте файл angular.json и измените точку входа в таблицы стилей.

Измените массив стилей в angular.json с

"styles": [
   "src/styles.css"
]

to

"styles": [
   "src/styles.scss"
]

3.5 Удалите rename.sh и переустановите пакеты npm.

Запустите rm rename.sh, чтобы удалить файл rename.sh.

Запустите npm install, чтобы переустановить все пакеты npm.

Запустите ng serveи open localhost:4200

Вы можете проверить, работает ли SCSS, скопировав этот код стиля SCSS в файл стиля компонента scss-sample.component.scss.

$font-color: #fff;
$background-color:#000;
p {
   color: $font-color;
   background-color: $background-color;
}

Если вы видите свое приложение так, как показано ниже, это означает, что ваше приложение Angular было успешно обновлено.

4. Настройте иерархию таблиц стилей SCSS.

В рабочем режиме нам нужно будет настроить четкую иерархию таблиц стилей, чтобы лучше управлять стилями нашего приложения. Как настроить собственную иерархию таблиц стилей, зависит от ваших предпочтений. Что касается меня, я хотел бы создать папку /styles/ в /src и создать в ней файлы _20 _, _ 21_ и index.scss.

В этом случае вы можете легко управлять своими глобальными переменными и миксинами внутри этих двух файлов и импортировать эти два файла в файл index.scss. Чтобы использовать объявленные переменные и миксины, просто @import '../../styles/index.scss';в scss-файле вашего компонента.

_variable.scss

$font-color: #fff;
$background-color:#000;

_mixins.scss

@mixin hover-effect {
   &:hover, &:focus {
      border: 1px solid red;
   }
}

index.scss

@import './variables';
@import './mixins';

scss-sample.component.scss

@import '../../styles/index.scss';
p {
   color: $font-color;
   background-color: $background-color;
   @include hover-effect
}

Вы увидите эффекты, как показано ниже:

5. Используйте переменные Bootstrap SCSS.

Чтобы использовать Bootstrap scss в приложении Angular, вы можете либо импортировать компонент scss начальной загрузки с синтаксисом @import, либо импортировать всю таблицу стилей начальной загрузки в файл styles.scss.

Например, если вы хотите использовать всю таблицу стилей начальной загрузки:

Сначала установите начальную загрузку, запустив npm install bootstrap.

После этого импортируйте начальную загрузку в styles.scss, добавив эту строку ниже:

@import ‘../node_modules/bootstrap/scss/bootstrap.scss’;

Теперь бутстрап был добавлен в ваше приложение Angular, и вы можете использовать некоторые встроенные классы начальной загрузки, такие как float-left, float-right, text-left, text-right и т. Д.

например scss-sample.component.html:

<p class="text-right">scss-sample works!</p>

Просмотр в браузере:

Заключение

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

Ура и спасибо за чтение!

Другие сообщения: