Menu
In my src folder, I have assets/styles folder where my global scss files are.
In my index.scss I import them like this
@import 'assets/styles/colors.scss';
@import 'assets/styles/links.scss';
@import 'assets/styles/basics.scss';
And then in index.js, I import compiled index.css
Problem: In basics.scss I'm using variable from colors.scss and getting an error Undefined variable: \"$black\".
And the same happens in components scss files if they use variables from that file. I really don't want to import colors in every single component. Is there a way to make these 3 files global?
To work with scss in reacting I'm using this link
UPD
228
Can I use Sass? If you use the create-react-app in your project, you can easily install and use Sass in your React projects. Now you are ready to include Sass files in your project!
scss' file is located in 'styles/scss' folder. You can replace it with your own directory. Save the file and run the app and you can access the variables anywhere!
Accessing a Global Variable Any property attached to the window object can be accessed from any script on the web page, including the script for the React app. Since window is a global object, the React code can also access its properties, as shown below.
Use partials when importing parts into index.scss
@import 'assets/styles/colors';
@import 'assets/styles/links';
@import 'assets/styles/basics';
The filenames should be
_colors.scss
_links.scss
_basics.scss
You can read more about this in the SASS docs under the Partial section.
198
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
