Sass использовать значение переменной в @import

Question

Мой код выглядит следующим образом

      &.village {
        &.village- {
          @for $i from 1 through 12 {
            &#{$i} {
              background-image: url('../../images/maps/#{$i}.png');

              @import "maps/map-#{$i}";
            }
          }
        }
      }

Но затем я получаю эту ошибку:

Ошибка сборки модуля: ModuleBuildError: Ошибка сборки модуля: @import "maps / map-# {$} я ";^ Файл для импорта не найден или не читается: maps / map - # {$ i}.

Я использую Laravel 5.6, я пытался найти его, но пока ничего не нашел.Можно ли импортировать имя файла переменной с помощью scss?

Answer 1

В настоящее время это невозможно , но некоторые новые функции могут быть добавлены в Sass в ближайшем будущем.

Этого можно добиться, используя условные выражения для создания правил, соответствующих импорту.,Вы можете использовать @if для этого (пока мы ожидаем, что оператор @switch будет реализован ):

@mixin customImport($file) {
    @if $file == 'file-one' {
        @import 'file-one';
    } @else if $file == 'file-two' {
        @import 'file-two';
    }
}

Затем позже:

@include customImport('file-one');