I’m trying to get all the variables from Bootstrap 4.6.2’s SCSS variables file and turn them into a regular CSS file so I can use them in Figma. When I try to compile the _variables.scss file using sass, I keep getting an error message that says something about theme-color not being a valid color. The error happens on line 178 where it tries to process the link hover color. I’m pretty new to working with sass and scss files, so I’m not sure what’s going wrong. Has anyone successfully extracted Bootstrap variables for use in design tools like Figma? What’s the right way to handle this conversion process?
That error happens because _variables.scss depends on other Bootstrap files for functions and mixins - you can’t compile it by itself. Create a wrapper file that imports the full Bootstrap framework first, then pull out what you need. I’ve done this by making a custom.scss file that imports bootstrap/scss/bootstrap at the top, then uses @each loops to go through the $theme-colors map and spit out CSS custom properties. The theme-color function won’t work unless you load the bootstrap functions first. You could also try sass-extract - it parses SCSS files and outputs JSON with all the computed values, then you can convert that to CSS variables programmatically.
Had this exact same problem when I built a design system last year. Bootstrap’s variables file needs functions and other dependencies that aren’t there when you compile it alone. Here’s what fixed it for me: create an SCSS file that imports Bootstrap’s functions first, then variables, then outputs everything as CSS custom properties. Import bootstrap/scss/functions before bootstrap/scss/variables - you need this for theme-color and other helper functions. Then loop through the maps and output them. Watch your file paths when importing too - wrong directory structure will break things. Once you’ve got the CSS custom properties, Figma import is easy.
if you’re havin issues with sass, just pull the compiled CSS from the cdn. saves u the hassle of dealin with errors and gives u what u need for figma without the scss headache.
This dependency issue is super common when you’re trying to pull Bootstrap’s variables. Don’t compile _variables.scss directly - here’s what actually works. Make a minimal SCSS file and import in this order: @import "bootstrap/scss/functions", then @import "bootstrap/scss/variables", then output whatever variables you need as CSS custom properties. Order matters here because Bootstrap calls functions inside the variable definitions. If SCSS compilation isn’t your thing, there’s an easier way - just grab the compiled Bootstrap CSS and extract the values using browser dev tools. This skips the whole dependency mess and gives you the final computed values that Figma can actually work with.
u can try to create a new scss file that imports the bootstrap vars then outputs them as css custom properties. like :root { --primary: #{$primary}; }. the theme-color issue happens when a var ain’t defined at the point u reference it.