I am using create-react-app with SCSS style-files. My project includes an App.scss file where I import all other .scss stylesheets, and a variables.scss file where I define all project variables.
However, when I import variables.scss into App.scss and then import all component style-files, I encounter an error
SassError: Undefined variable: $greyborder-bottom: 1px solid $grey in the Header.scss file.
While importing variables.scss directly into Header.scss resolves the error and everything works fine, I do not want to include variables in every component .scss file.
How can I effectively utilize variables from variables.scss across all files in my project?
My attempts so far:
- Renaming
variables.scssto_variables.scssand importing as@import 'components/variables'; - Importing
variables.scssbefore other imports inApp.scss - Directly importing
variables.scssintoindex.scss - Searching for a solution but nothing has worked so far
variables.scss
$grey: #fefefe;
$black: #000000;
App.scss
@import 'components/variables';
@import 'components/header/Header.scss';
Project Structure Screenshot