Dawn theme: Liquid variables preventing Grunt from converting scss to css.liquid file

Store Design
1

So i am using the latest Dawn theme. I use grunt (Sass) to convert my scss files to css.liquid. Below is the rule in grunt for Sass highlighted with red.

Jaison_Manithar_0-1636996074224.png
Jaison_Manithar_0-1636996074224.png1170Ă—209 29.7 KB

However the SCSS file here contains css variables which resolve through liquid variables. These liquid variables are defined in the theme.liquid within the css pseudo :root element.

Below is the SCSS file:

Jaison_Manithar_1-1636996216629.png
Jaison_Manithar_1-1636996216629.png601Ă—430 85.4 KB

And below is the theme.liquid with the liquid variables:

Jaison_Manithar_2-1636996271424.png
Jaison_Manithar_2-1636996271424.png1438Ă—504 335 KB

Problem: The issue is every time the grunt rule for converting this SCSS file to css.liquid is run, it fails since it cannot process the liquid variables present in the theme.liquid.

Is there any way to be able to process these liquid tags using grunt and the SASS.

2

Thanks i got my answer from your question, Dawn Theme :root class situated in theme.liquid file, is there is any other way to declare :root class for (–example-variables) in any other file like in snippet or section file ?

or we need to always find :root elements file and create new variables for css kindly tell.