Как использовать Angular 4 с SASS

Я начинаю свой первый проект с использованием Angular4 и sass, и я пытаюсь понять это, как работать с sass надлежащим образом. Я использую angular-cli и уже установил стиль по умолчанию для использования синтаксиса scss. Я также уже определил компиляцию и т.д.

Однако я увидел, что у нас есть опция styleUrls для компонента, где в некоторых случаях мы определяем стили, используемые только в этом компоненте.

Проблема в том, что когда я установил файл scss в этом component он не генерировал свой собственный файл .css не включался в основной файл .css, сгенерированный из корневого проекта.

В общем, у меня есть такая структура проекта:

app
    app.module.ts
    app.routing.ts
    home
        home.component.ts
        home.html
        _home.scss
    client
        client.component.ts
        client.html
        _client.scss
scss
    _imports.scss
    colors
        _colors.scss
    ui
        _button.scss
        _table.scss
    //.. more folder and files
styles.scss
index.html

И я хотел бы иметь возможность установить основной стиль css в файле styles.scss, который будет вставлен в файл index.html позже, в процессе сборки. Но также можно сгенерировать один файл css для каждого компонента, который у меня есть, например, home и client, и использовать только те стили css в своем собственном component.

Возможно ли это сделать? Я пытался сделать это, и я не нашел другого ресурса об этом!

Ответ 1

Что вы ищете, это директива import:

@import "styles.scss";  
@import "css/styles.scss";  
@import url("http://example.com/css/styles.scss");

Это импортирует CSS из других файлов CSS в основной файл CSS, добавляя содержимое каждого файла в основной файл на основе порядка, который вы хотите вставить.

Обратите внимание, что вам не требуется расширение файла .scss, так как SASS будет обрабатывать это автоматически, и вы можете просто импортировать его с помощью @import "file". И вам также не нужно указывать каждый файл с независимым импортом, так как вы можете объединить все их в один импорт:

@import "styles.scss", "css/styles.scss", url("http://example.com/css/styles.scss");

Вы также можете делать вложенный импорт, указав @import внутри селектора:

.global-nav {  
  @import "nav-bkgd";
}

Надеюсь, это поможет!:)

Ответ 2

В Angular 4.4+ с ng-cli вам нужно изменить следующие настройки в .angular-cli.json

{
  ...
  "apps": [
    ...
    "styles": [
        "styles.scss"
      ],
      ...
  ]
  ...
  "defaults": {
    "styleExt": "scss",
    "component": {}
  }
}

и в каждом компоненте, если необходимо, измените .css на .scss

@Component({
    selector: 'app-your-component',
    styleUrls: ['./your-component.component.scss']
})

Ответ 3

Вы можете указать scss при создании проекта.

ng new project-name --style scss

Ответ 4

У меня была такая же проблема, у меня есть компонент leftnav, и его scss, казалось, никогда не компилировался, я пробовал все выше, но не работал, и я попытался создать новое приложение с помощью ng new.... но после этого я исправлено, изменив мои мысли: D

похоже, что мы не можем использовать same component selector внутри его относительного .scss файла но вместо этого мы должны использовать обертку div с подходящим именем класса и использовать это .className как корневую упаковку содержимого файла .scss.

позвольте мне продемонстрировать, это мое приложение:

app/component/leftnav
  |leftnav.scss
  |leftnav.html ==> simply `left nav works!`
  |leftnav.ts ==> selector leftnav
app/
  |app.html
  |app.scss

и внутри старого leftnav.scss

leftnav{
    background:red;
}

и внутри app.html

<leftnav></leftnav>

и как я его исправил! как я сказал, добавив div с классом .leftnav внутри leftnav.html и используя его как корневую упаковку моего leftnav.scss вместо селектора компонентов

поэтому мой новый

.leftnav{
    background:red; 
}

и он работает!

Ответ 5

Если у вас уже проект wokring ng new my-sassy-app --style=scss не поможет, поэтому вам нужно использовать ng set defaults.styleExt scss, это изменяет angular.cli.json файл как

"defaults": {
  "styleExt": "scss",
  "component": {
 }
}

Теперь измените уже существующие файлы css на расширение scss, вы увидите, что теперь работает scss. Не забудьте изменить расширения css в ваших определениях компонентов на scss Источник