Переход на стилизованные компоненты с глобальными переменными SASS в React
Я пытаюсь постепенно вводить стилизованные компоненты в мою существующую кодовую базу, которая в значительной степени полагается на глобальные переменные SASS (частичные компоненты, импортированные в main.scss).
Как мне сослаться на переменные SCSS? Следующее не работает:
import React from 'react';
import styled from 'styled-components';
const Button = styled.button`
background-color: $color-blue;
`;
export default Button;
Я не с той стороны подхожу к этому?
Ответы 4
Переменные играют очень важную роль в .scss или .sass, но функциональность не может быть расширена за пределами файла.
Вместо этого вам нужно создать отдельный файл .js(Например: variable.js) и определить все ваши переменные как объект.
Я рекомендую использовать компонент ThemeProvider. Я также ухожу от дерзости к стилизованным компонентам. Тематика со стилизованными компонентами использует контекстный API React и довольно приятна. Ознакомьтесь с этой документацией Тематика стилизованных компонентов.
Я написал статью о решении этой самой проблемы. https://medium.com/styled-components/getting-sassy-with-sass-styled-theme-9a375cfb78e8
По сути, вы можете использовать отличную библиотеку sass-extract вместе с sass-extract-loader и плагином sass-extract-js, чтобы перенести глобальные переменные Sass в ваше приложение в качестве объекта темы.
Отличная статья, спасибо, что нашли время! :) Я бы просто предложил поддерживать согласованность между именами файлов для простоты понимания. Во фрагменте кода, когда вы создаете переменную const theme = ..., имя файла SASS - vars.scss, но позже в статье вы упоминаете файл с именем variables.scss. Поскольку я новичок, я не был уверен, следует ли мне заменить vars.scss на имя моего файла или это был какой-то путь, специфичный для команды :)
Простите меня, если это старый вопрос, но я подумал, что вмешаюсь в то, как я использую переменные CSS для моих .scss и styled-components, когда в этом возникает необходимость.
Основное использование:
Объявление глобальной переменной (желательно на _variables.scss)
:root {
--primary-color: #fec85b;
}
Используя глобальное свойство:
.button {
background-color: var(--primary-color);
}
или же
const Button = styled.button`
background-color: var(--primary-color);
`;
Обратите внимание на двойную строчку --.
Работает как часы!
У вас не будет доступа к переменным SASS вне вашего файла SASS. Вместо этого вам нужно будет определить их где-нибудь в файле констант как объект.