Angular 6 не распознает синтаксис .sass, хотя настроен для Sass - PullRequest
Новая
       31

Angular 6 не распознает синтаксис .sass, хотя настроен для Sass

0 голосов
/ 30 июня 2018

Я создал новый проект, используя Angular cli, используя следующую команду: 

ng new myProject --style=sass

Все мои компоненты генерируют файлы sass, и моя основная таблица стилей также sass. Однако всякий раз, когда я пытаюсь скомпилировать и запустить код (я использую «ng s»), я получаю следующую ошибку. 

ERROR in ./src/app/elements/tabs/tabs.component.sass
Module build failed:
    height: 40px
                  ^
      Invalid CSS after "...height: 40px; }": expected 1 selector or at-rule, was "{"

Строки, указанные в файле sass, выглядят так (ссылка на строку 4): 

@import "./../../../variables.sass"

//Regular Tabs
.tabs-container
      height: 40px
      background: $app-black
      .tab
        font-family: 'Lobster', cursive
        font-size: 1.1em
        width: 120px
        padding-top: 10px
        padding-left: 20px
        padding-right: 20px
        color: $app-white

        display: flex
        justify-content: center

Понятия не имею, почему именно этот файл ломается, так как все мои другие файлы также используют sass.

Я использую Angular ^ 6.0.3 и в своем файле angular.json вижу: 

  {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "myProject": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "sass",
        },
   …

Почему Angular не распознает синтаксис sass indent?

1 Ответ

0 голосов
/ 30 июня 2018

Я только что понял это. Видел проблему, когда я вставлял свой код в вопрос. Ошибка немного смутила меня, поскольку она дает информацию о файле css, созданном прекомпилятором sass, а не о самом файле sass.

У меня была проблема с отступом, вызванная некоторыми настройками редактора в моем ide. Всякий раз, когда я сохранял, это добавляло некоторые дополнительные отступы. Первое место, где это произошло, было после 4-й строки. 

@import "./../../../variables.sass"

//Regular Tabs
.tabs-container
      height: 40px
      background: $app-black
      .tab
        font-family: 'Lobster', cursive
        font-size: 1.1em

На самом деле должно быть: 

@import "./../../../variables.sass"

//Regular Tabs
.tabs-container
  height: 40px
  background: $app-black
  .tab
    font-family: 'Lobster', cursive
    font-size: 1.1em

Я изменил конфигурацию в ide и смог сохранить файл с правильными отступами, и он отлично скомпилирован.

...