Error while Extending classic Theme Liferay 7.3

Question

I am facing a problem while triying to extend classic theme(even if it s not recomended), but with the new Style book capabilities of liferay it's a good opportunity for us to speed up our theme creartion.

I have created a basic theme project using "yo liferay-theme" generator build my theme and deploy it, everythings OK. Then i downloaded the necessary files from lifery frontend-theme-classic github repo : [https://github.com/liferay/liferay-portal/tree/7.3.x/modules/apps/frontend-theme/frontend-theme-classic][1] [1]: https://github.com/liferay/liferay-portal/tree/7.3.x/modules/apps/frontend-theme/frontend-theme-classic i add the folders : css, images, templates and some necessary changes under the WEB-INF directory. When i run gulp build i got an error about undefined variables.

Here is the error message after a gulp:build :

Starting 'build:compile-lib-sass'... [23:21:28] 'build:compile-lib-sass' errored after 1.94 s [23:21:28] Error in plugin 'gulp-sass' Message: build_css\custom_properties_custom_properties_variables.scss Error: Undefined variable: "$btn-link". on line 10 of build/_css/custom_properties/_custom_properties_variables.scss from line 1 of build/_css/_custom_properties.scss from line 13 of build/_css/_custom.scss from line 21 of build/_css/main.scss

                 link: $btn-link,

--------^

Details: status: 1 file: C:/Users/sgFSJESO/ump-theme/build/_css/custom_properties/_custom_properties_variables.scss line: 10 column: 9 formatted: Error: Undefined variable: "$btn-link". on line 10 of build/_css/custom_properties/_custom_properties_variables.scss from line 1 of build/_css/_custom_properties.scss from line 13 of build/_css/_custom.scss from line 21 of build/_css/main.scss

                 link: $btn-link,

If anyone has solved this issues i would be happy to understand why.

Answer 1

To rebuild the "classic" theme, you should take these 2 steps:

1. copy the source code from https://github.com/liferay/liferay-portal/tree/7.3.x/modules/apps/frontend-theme/frontend-theme-classic,
2. set the right versions for the parent themes in your theme build.gradle file:

The latest 7.3.x classic theme is dated with June 24, 2021. So I set the closest versions for parent themes as:

parentThemes group: "com.liferay", name: "com.liferay.frontend.theme.styled", version: "5.0.25"
parentThemes group: "com.liferay", name: "com.liferay.frontend.theme.unstyled", version: "5.0.26"
portalCommonCSS group: "com.liferay", name: "com.liferay.frontend.css.common", version: "5.0.6"

I also added

cssBuilder group: "org.slf4j", name: "slf4j-simple", version: "1.7.10"

Hope this will help you.

Answer 2

the error indicate that some of variable not able to find through theme. so make sure if

Answer 3

I had the same problem, I fixed it with the library Clay, I copied all the folder at \src\css\clay