Change in sass variables doesnt apply when launching application

0
Hello,   I’m new to Mendix and with no experience in web development. I’m working with version 9.23. I’m currently trying to modify the file custom-variables.scss in order to change the design of my application. Let’s say I’m trying to change the color associated to $brand-primary in the custom-variables.scss file. To be sure that I am modifying the good file, I checked that the same custom-variables.scss is imported in the main.scss in every modules.  But after launching the application, no changes are applied and I still see the previous configuration. I also try on VSCode to find all the occurences of the previous color used for $brand-primary, change them all to the new one and launch again but still no modification applied on the application.    Do you have any idea how to solve this ?   Thank you ! 
asked
3 answers
0

This can have multiple causes.

Make sure you use the correct syntax
@import "custom-variables"; 
This line should be in your main.scss file in you App/Styling folder.

 

Use the browser inspect button to find out if changes will come through, and also if they are overwritten by default styling for example.


Also check out this documentation for correct settings of your folder structure > 
https://docs.mendix.com/refguide/app-settings/#64-ordering-ui-resource-modules

answered
0

Thanks for your answer Armand ! 

 

I did use the correct syntax to import custom-variables in the main.scss.

 

But I have the impression that the folder structure in my application is kind of odd (image below).  

 

The main.scss that is selected in the image above is the one I modified with @import "custom-variables"; . All the resource module are linked to the custom-variables.scss I did modify with the changes I wanted to apply (@import "../../../theme/web/custom-variables"; is present in all of them). 

 

In the web browser inspector, when I look a specific button (of type “primary”) that I’d like not to be in the previous color, it tells me that the color is in styles/web/sass/core/base/mixins/_buttons.scss

 

What I don’t get is how the variable $color in this file is given the value #680bea (which is the previous color)

answered
0

I suspect you are not picking up the compiled stylesheet.

Check out the settings.json file in your theme. The value for cssFiles should be “theme.compiled.css’.
 

    "cssFiles": [
        "theme.compiled.css"
    ],

 

It is also worth checking that your index.html file is using {{themecss}} in its <head> to bring in this value.

Good luck!

​​​​​​​

answered