SCSS and Theme systems.

[ghost]

Hi,

I use SCSS to manage several themes on my website. I wanted to use your transformation system and bundle to to avoid manual compilation. (Website in C#.net MVC).

We have this structure:

• SCSS files for each page of our site
• A theme file that contains all the variables specific to each theme (ex: colors)
• A "Bundle" file that imports the theme file and all others file.

Example Bundle File:

@import "Themes / _ThemeForms"; => File containing the variables of the theme

// All SCSS files on different pages
@import "Univers/_Univers_Classique";
@import "Univers/_Univers_RollOver";
@import "Formulaire/_Formulaire_Classique";
@import "Formulaire/_Formulaire_RollOver";
@import "Restitution/_Restitution";
@import "Pages/_Comparaison";
@import "Pages/_Article";
@import "Pages/_Annexe";

So I did the same in C# for each theme

CustomStyleBundle scssBundle = new CustomStyleBundle("~/Design/FormsCss");
scssBundle.Include("~/Design/scss/Themes/_ThemeForms.scss"); => Only this file changes for each theme
scssBundle.Include("~/Design/scss/Univers/_Univers_Classique.scss");
scssBundle.Include("~/Design/scss/Univers/_Univers_RollOver.scss");
scssBundle.Include("~/Design/scss/Formulaire/_Formulaire_Classique.scss");
scssBundle.Include("~/Design/scss/Formulaire/_Formulaire_RollOver.scss");
scssBundle.Include("~/Design/scss/Restitution/_Restitution.scss");
scssBundle.Include("~/Design/scss/Pages/_Comparaison.scss");
scssBundle.Include("~/Design/scss/Pages/_Article.scss");
scssBundle.Include("~/Design/scss/Pages/_Annexe.scss");
return scssBundle;

At runtime, the transformation crash because it does not find the variables contained in _ThemeForms.scss. The problem is that if I make an @import file with the variables, I lose the ability to manage multiple themes.

Do you have a solution ? Regards,

[Taritsyn]

Hello, Kain!

I recommend you to read the following comment.

[ghost]

Hello,

It works. Thank for you help !