S CSS Неопределенная переменная: "$ general-grey", но переменная фактически определена и отличается - PullRequest
Новая
       31

S CSS Неопределенная переменная: "$ general-grey", но переменная фактически определена и отличается

1 голос
/ 31 марта 2020

Я довольно новичок в этом, и мне было поручено обновить тему Roots Sage, которую мы используем для нашего сайта, до последней версии. Теперь процесс преобразования сам по себе не сложен, однако при импорте заголовка в новую папку темы и компиляции с yarn run build я получаю эту ошибку: 

 ERROR  Failed to compile with 2 errors                                                                                                                                                                                                            12:29:21

error  in ./resources/assets/styles/main.scss

Module build failed: ModuleBuildError: Module build failed:
      color: $general_grey;
            ^
      Undefined variable: "$general-grey".
      in /home/html/devel/website-folder/wp-content/themes/website-theme/resources/assets/styles/layouts/_header.scss (line 33, column 14)

Как вы можете видеть, там написано является неопределенной переменной в строке 33, столбец 14 называется $general-grey. Однако это неверно, поскольку переменная определена в файле _variables.scss и импортирована с помощью @import "common/variables"; в файле main.scss.

Это строки, в которых переменные цвета определены в _variables.scss: 

$theme-colors: (
  primary: #525ddc,
  brand_primary: #00add3,
  brand_darken: #0083a0,
  general_grey: #3d3d3d,
  overlay_text: #fff,
  std_black: #000,
  breadcrumb: #bababa,
  arancione: #f7941d,
  arancione_hover: #ab6614,
  verde: #90dd00,
  azzurro: #50c9e2,
  color-donne: #da6b93,
  grey_strong: #abbdc9
);

И это файл _header.scss, в котором я пытаюсь использовать переменную general_grey: 

.green_number {
      font-family: $font-family-sans-serif;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      color: $general_grey;
      margin: 0;

      a {
        color: $general_grey;
      }

      .fa-phone,
      .green {
        color: $verde;
      }
    }

В обоих _variables.scss и _header.scss он называется $general_grey с подчеркиванием , тогда как ОШИБКА сообщает неопределенную переменную в строке 33, столбец 14 - $general-grey с a da sh.

Вероятно, из-за моей неопытности, но я не могу действительно пройти через это. Что может вызвать эту ошибку?

Заранее спасибо за советы! :)

Ответы [ 2 ]

1 голос
/ 31 марта 2020

$theme-colors - это Расширенные функции переменных . Таким образом, для доступа к переменной general_grey вы должны будете использовать следующее: 

color: map.get($theme-colors, "general_grey");
0 голосов
/ 31 марта 2020
  1. Обратите внимание, что ошибка показывает дефис в имени переменной и не подчеркивает.

$ general-grey не совпадает с $ general_grey ;

Вы не можете подобрать цвета с карты темы просто так.

Проверьте, как работают миксины в S CSS, и определите один, чтобы выбрать нужный цвет.

...