phpsasssugarcrmsuitecrmsuite

How/Where does SuiteCRM compile the scss files in a theme?


I'm currently working on setting up a custom admin page for a specific task I need to do and it requires some custom styling in the theme. I went to the themes/SuiteP/css folder and found admin.scss. After making a change, I had assumed that Suite would dynamically compile the asset since I am developer mode; however, that did not happen.

I decided to search the code for any place I could find that would deal with compiling those files to *.css, but found no such place.

My question involves inquiring as to where that compilation takes place and/or how it takes place. Right now it appears as if I have to manually compile those assets, which seems pointless because it is just an extra step I have to manually take, rendering using SCSS less useful in comparison with CSS.

Right now, my solution will probably have to be adding a CSS file that has nothing to do with whatever pipeline exists, but if I can leverage existing functionality, that would great.


Solution

  • Due to legacy issues with the SugarCRM framework, SuiteCRM loads style.css for current theme. The sass work for SuiteCRM is in a transitioning period. It is currently a manual process, but we hope to make it automated in the future.

    We are using Sass as a way to allow developers to customise the SuiteP theme. I have a github project which provides a UI to generate the variables.scss for you. I am hoping that it will be accepted in a future release.

    So in regards to your workflow you only need to care about the style.css.

    If you want to contribute back to the SuiteCRM project, then you will need to use the sass files in themes/SuiteP/css/.

    However, if this is just for your instance of SuiteCRM, then you will want to create a style.css in the custom/themes/SuiteP/css/style.css. How you change that is up to you.

    I would recommend that you use Sass to generate the style.css.

    You can achieve this by copying the style.scss file custom/themes/SuiteP/css and then add the following to the file

    @import ../../../../themes/SuiteP/css/style.scss
    

    Note: I may have the path slightly wrong

    or use the command line tools to include the themes/SuiteP/css/ directory

    See for details: SASS: Import a file from a different directory?

    SuiteCRM should pick up the rest of the work. There is a change in SuiteCRM 7.9 that deprecates the $sugarcrm_version in favour of $suitecrm_version. This will effect theme themedef.php.

    See for details https://github.com/salesagility/SuiteCRM/pull/3233/files

    I hope this answers your question.