How to access sass variables in a different blazor server project (added as dependency)?

Question

Imagine I have a company, and I'm going to create two blazor server projects: PayrollApp and WarehouseApp. I want both to look similar. I'm using sass to compile the css for the projects. I want to define/maintain "common" sass in one place and then extended it in each project. My thought was to create a separate project (as an RCL?) named CompanyStyles with scss files like this:

CompanyStyles/wwwroot/scss/_colors.scss

The _colors.scss file looks like:

   $primaryColor: red;  
   $secondaryColor: green;  

Then I would add this CompanyStyles project to the PayrollApp project as a dependency.

In the PayrollApp project I'd have a file like:

PayrollApp/wwwroot/scss/payrollList.scss

The payrollList.scss file looks like:

   @use ???????????? // the '@use' is what I can't figure out how to do  
   @use '_content/CompanyStyles/scss/colors'; // this or anything similar won't compile  
     
   h1.employee { color: colors.$primaryColor; }  

When I try to compile payrollList.scss of PayrollApp, the dart-sass compiler tells me "Can't find stylesheet to import."

How can I get access to (aka @TMF-Rutuja ) the sass variables (and mixins etc) that's inside the external project CompanyStyles?. Or if this approach is wrong, how would I have a common base of sass that I only need to maintain once?

Answer 1

external files don't reference internal. the main file should reference the custom file and the external. google for tutorials on structuring sass projects

also not sure why sass source files would be in wwwroot.

Answer 2

Hi @Daniel Despain ,

I want to define/maintain "common" sass in one place and then extended it in each project

You can try to create an RCL , and transform the Sass code into CSS code, then consume CSS from the RCL.
Read Consume a Razor component from an RCL to know more.

----------

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Qing Guo