Sass-загрузчик не заменяет переменные? - PullRequest
Новая
       22

Sass-загрузчик не заменяет переменные?

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

Не так давно я создал проект, который использовал комбинацию переменных SASS и пользовательских свойств CSS.Я определил свои переменные Sass, а затем использовал их для создания своих пользовательских свойств CSS.Все отлично работало.Теперь я пытаюсь сделать то же самое, используя тот же код и загрузчики (Webpack), и он не работает, и я не могу понять, почему.

У меня есть файл style.scss, который выглядит какthis: 

$var1: #ff3344;
h1 { color: $var1; }
:root { --color1: $var1; }

Когда я строю свой проект с помощью Webpack, используя sass-loader, css-loader и style-loader, я получаю следующий вывод: 

h1 { color: #ff3344; }
:root { --color1: $var1; }

По некоторым причинам,$var1 заменяется на h1, но не на --color1.

Поскольку я делал это раньше без проблем, я ожидал, что причиной может быть sass-loader.Но я понизил sass-loader до 6.0.7, которая была той же версией, которую я использовал в проекте, в котором это работало, но у меня все еще есть эта проблема.Почему sass-loader не заменяет $var1, когда ему присваивается --color1?

1 Ответ

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

Пользовательские значения переменных поддерживают только SassScript внутри #{}.

Например, если вы хотите иметь массив цветов: 

$blue:    #007bff !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #e83e8c !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffc107 !default;
$green:   #28a745 !default;
$teal:    #20c997 !default;
$cyan:    #17a2b8 !default;

$colors: () !default;
$colors: map-merge((
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
), $colors);

@each $color, $value in $colors {
    --#{$color}: #{$value};
}
...