Compilation SCSS Error upon generating a new theme with "generator-liferay-theme"

[rbatllet]

Issue type (mark with x)

• [ ] :thinking: Question
• [x] :bug: Bug report
• [ ] :gift: Feature request
• [ ] :woman_shrugging: Other

Version (mark with x)

• [ ] :eight: v8.x
• [ ] :nine: v9.x
• [x] :keycap_ten: v10.x or higher

Description

I used the "generator-liferay-theme" component to generate a new theme for Liferay. After the generation, without making any changes to the generated files, I tried to execute npm run build and encountered a SCSS compilation error.

Desired behavior: Upon generating a new theme with "generator-liferay-theme", the resulting code should compile without any errors when running npm run build. Specifically, SCSS compilation should complete successfully, allowing developers to start their theme customization with a clean, error-free base.

Current behavior:

Repro instructions (if applicable):

? What would you like to call your theme? MyTheme
? What id would you like to give to your theme? my-theme
? Which version of Liferay is this theme for? 7.3
? Would you like to add Font Awesome to your theme? Yes
   create .gitignore
   create gulpfile.js
   create package.json
   create src/WEB-INF/liferay-look-and-feel.xml
   create src/WEB-INF/liferay-plugin-package.properties
   create src/images/thumbnail.png
   create src/css/_custom.scss

I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.
...
? Select your deployment strategy Local App Server
? Enter the path to your app server directory: /Users/user/opt/current/liferay/t
omcat-9.0.43
? Enter the url to your production or development site: http://localhost:8080

% cd my-theme
% npm run build

Other information (environment, versions etc): generator-liferay-theme: 10.2.1 node: 20.5.1 Operating system: MacOS 11.7.9

[bryceosterhaus]

It may be related to this, https://github.com/liferay/liferay-frontend-projects/issues/1160

Can you confirm if forcing the sass version resolution to 1.64.1 and see if that works?

[rbatllet]

Thank you for the suggestion @bryceosterhaus . I tried forcing the sass version resolution to 1.64.1 as you mentioned, but unfortunately, it didn't work. I'm still encountering the same issue.

[bryceosterhaus]

cc @pat270 do these errors make sense to you at all? I haven't gotten a change to look yet, but figured you may have a better idea

[pat270]

@bryceosterhaus yes, this was an old pattern we used to unset variables in libSass. It turns out it was a bug and not a feature. It was "fixed" in Sass. Any place with $variable: !default; should be converted to $variable: inherit !default;. Is this from the compat layer? I can send a pr for it.

[pat270]

@rbatllet @bryceosterhaus The compat layer on this repo doesn't have instances of this pattern. We have it in our older liferay-frontend-theme-*. I was able to reproduce this using [email protected] and building a 7.3 theme. The work around for this is to disable Dart Sass by following the instructions at https://github.com/liferay/liferay-frontend-projects/tree/master/projects/js-themes-toolkit/packages/liferay-theme-tasks#disabling-dart-sass.

[rbatllet]

Hey @pat270, just wanted to drop a quick note of appreciation. Your tip on disabling Dart Sass totally did the trick for my theme issues. It's awesome working with open-source tools and having a community like this to lean on. Kudos and thanks for the quick fix!

[pat270]

@rbatllet No problem! Thanks for reporting this, I'll add it to the read me file. I'm sure this will come up again.

[pat270]

@bryceosterhaus is there a way we can disable Dart Sass if generating a 7.2 or 7.3 theme?

[bryceosterhaus]

@pat270 Yeah I would think that would be possible. I opened an LPS and will let product know