Я новичок в Sass и испытываю проблемы при импорте переменных из частичных таблиц стилей. Я думал, что это довольно просто, но похоже, что это не так.
Я использую эту таблицу стилей в компоненте реакции, импортировав следующим образом:
import '../stylesheets/Table.scss';
Фактическая таблица стилей ( упрощено, но с той же ошибкой) выглядит так:
@use 'colors.scss';
.datatb-container {
background-color: colors.$table-bg;
border: 2px solid colors.$table-border;
border-radius: 2px;
padding: 1.2%;
max-width: 40rem;
}
А файл, в котором находятся мои переменные, называется _colors.scss, находится в том же каталоге, что и Table.scss, и выглядит так:
// App colors
$highlight: rgb(197, 145, 0);
// Table colors
$cell-bg: white;
$table-bg: gainsboro;
$cell-border: gray;
$table-border: black;
Когда я запускаю React, я получаю следующую ошибку:
SassError: Invalid CSS after "...ound-color: color": expected expression (e.g. 1px, bold), was ".$table-bg;"
on line 4 of ./src/stylesheets/Table.scss
>> background-color: color.$table-bg;
Я уже пробовал менять каталоги, используя переменные разными способами, изменяя пространство имен на @use 'colors' as {smth}, но Я всегда получаю сообщение об ошибке.
Что я делаю не так?