Custom Theme Does not Compile Anymore

mdvenoms
Posts: 26
Joined: 24 Sep 2015, 13:07

12 Oct 2020, 19:52

Hi all

We still have many issues during the update process, the documentation really lacks a lot of parts i.e., when creating an own theme.

The following sample from the documentation does unfortunately not work:

primefaces-babylon-mytheme -> theme.scss

Code: Select all

$primaryColor: #2196F3 !default;
$primaryLightColor: scale-color($primaryColor, $lightness: 60%) !default;
$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
$primaryTextColor: #ffffff !default;

//highlight
$highlightBg:$primaryColor !default;
$highlightTextColor:$primaryTextColor !default;
@import '../sass/theme/_theme';
Produces:

Code: Select all

failed: Undefined mixin 'border-radius'
, as soon as I import mixins the next error occurs, I think some imports are missing here.

Thank you very much for your help,
D

christophs78
Posts: 64
Joined: 01 Mar 2018, 12:29

13 Oct 2020, 07:22

PrimeOne-update would have deserved a major-version-jump.
And it would realy help to have kind of change-log and migration-guide. Beside getting it technically running you have to check the layout of each page of your application after doing this update.

mert.sincan
Posts: 4638
Joined: 29 Jun 2013, 12:38

13 Oct 2020, 09:36

Hi,

Could you please check designer folder under src/main/webapp/resources/sass/theme? And please use the latest version(3.3.2). V3.3.1 had some problems with designer folder.

Best Regards,

mdvenoms
Posts: 26
Joined: 24 Sep 2015, 13:07

13 Oct 2020, 14:23

Thank you very much for your response mert, unfortunately using all the latest files does not change anything.
Does this work for anyone?

Best regards,
D

mert.sincan
Posts: 4638
Joined: 29 Jun 2013, 12:38

13 Oct 2020, 14:48

Hi,

Thanks a lot for the update! Yes, it works fine for me. Could you please try it with our sample app(tag folder) in the dowloaded zip?

Please follow these steps;
- create primefaces-babylon-mytheme folder under src/main/webapp/resources
- create theme.scss file under primefaces-babylon-mytheme folder
- add your scss codes into theme.scss
- provide theme.css file using SASS command (then please check theme.css file under primefaces-babylon-mytheme folder)
- change primefaces.THEME's value in web.xml

Code: Select all

<context-param>
        <param-name>primefaces.THEME</param-name>
        <param-value>babylon-mytheme</param-value>
    </context-param>
- finally, mvn clean jetty:run

Best Regards,

mdvenoms
Posts: 26
Joined: 24 Sep 2015, 13:07

13 Oct 2020, 16:24

Hi Mert

Did you really try to create and compile a custom theme? I did all the steps but it does not work.

Code: Select all

[ERROR] Compilation of template .../src/main/webapp/resources/primefaces-babylon-xxx/theme.scss failed: Undefined mixin 'border-radius'.
BTW: The files _theme_variables.scss and _variables under .../sass are not part of the demo app, is this on purpose?

Thank you very much,
D

mert.sincan
Posts: 4638
Joined: 29 Jun 2013, 12:38

15 Oct 2020, 07:59

Yes, it works fine for me. Please see;
https://www.dropbox.com/s/b7rn5xrq1m7y1 ... n.mov?dl=0 (with tag folder with babylon 3.3.2)

Best Regards,

mdvenoms
Posts: 26
Joined: 24 Sep 2015, 13:07

03 Nov 2020, 20:27

Thank you very much mert, in the meantime I found out that using the CLI directly (i.e., not using sass via maven plugin) gives me a more detailed error message.
The problem seems to occur as soon as you use variables within the overrides (i.e., within _theme_styles.scss).

Code: Select all

sass --update code/src/main/webapp/resources/ --sourcemap=none
      error code/src/main/webapp/resources/sass/overrides/_theme_styles.scss (Line 121: Undefined mixin 'border-radius'.)
      

I am currently not sure what the most elegant fix should look like, do you have an idea?

Thank you very much and best regards

mert.sincan
Posts: 4638
Joined: 29 Jun 2013, 12:38

09 Nov 2020, 10:11

Hi,

Thanks a lot for the update. Could you please attach the codes in your overrides/_theme_styles.scss?
The problem seems to occur as soon as you use variables within the overrides (i.e., within _theme_styles.scss).
- Interesting! The files under the overrides folder are always empty. They are for User to use.

Best Regards,

mdvenoms
Posts: 26
Joined: 24 Sep 2015, 13:07

17 Nov 2020, 13:42

Hi mert

Thank you very much for your response. Sorry I forgot to mention that we heavily rely on the files within the overrides folder.
This means that we customized the styling / layouts a lot using the prepared files.
As soon as we do not use SASS variables anymore within those files the compilation works without any issues.

Post Reply

Return to “Babylon - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests