_custom.scss code is getting over written with older version of the code in Mendix 9.3.0

0
Hi Team,   In our project we have created a _custom.scss file for some UI customization in Mendix 8.12.1 and then upgraded the project to 9.3.0. Recently I made some changes to the file but whenever I am running the app it is always reflecting the old code. When I am opening the _custom.scss file from the location theme\styles\web\sass\app folder I am able to see my changes but the same is not reflecting when running the app.    Any suggestions?
asked
5 answers
0

Did you see the documentation here: https://docs.mendix.com/howto/front-end/customize-styling-new/ ? See the 2.3 part:

Developers can add custom styling for apps in the theme/web or theme/native folder.

Regards,

Ronald

answered
0

Hey,

Did you link the file in your main.scss? Mendix9.0 has it's own internal compiler for scss which was absent in Mendix 8 (I believe). So it should be linked in the new main (theme/web/main.scss) so that it can compile into the new stylesheet.

answered
0

Follow the documentation. Also, what Atlas version are you using? Did you upgrade from Atlas 2 to 3 for example?

In that case, the best advice would be to go through https://docs.mendix.com/refguide/moving-from-atlas-2-to-3/ and also the link in Ronald's answer, but I would also direct you to 4: creating a custom module. 

In that module you can essentially replace the standard styling with your custom styling wholesale so that Mendix will have to draw from your well. This will also make it more update proof as it will be easily exportable. 

Instead of all this, you can also drop it all into the main.scss file. That gets loaded *after* the custom variables so that will also work.

answered
0

Hi Dilip,

In 
/theme/web/main.scss
You should import your custom scss files:
 

@import "custom-variables";

@import "custom-fonts";

@import "custom-styling";

 

These scss files should be in the same folder.

 

answered
0

I have seen another forum post that might had the same issue
- https://forum.mendix.com/link/questions/106296

Fabian states the following solution:
"

In order for the scss files from `/themesource` to be compiled, the `settings.json` from your theme needs to be adjusted (this comes out-of-the-box with the new Atlas UI 3.0 starter apps) to include `theme.compiled.css` in the list of `cssFiles`.

 

When `theme.compiled.css` is added to the `cssFiles`, Studio Pro should start compiling all `web/main.scss` files from the `themesource` folders as described in https://docs.mendix.com/howto/front-end/customize-styling-new#styling-output

 

Do note – as this is also not explicitly mentioned in the docs – that the Atlas 2 SCSS files in the `theme` folder are not automatically compiled by this system. It is purely for the new `themesource` modularized system.

”

Maybe that will help!

answered