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
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)
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!