Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
2 of 7 tasks
rbatllet opened this issue Aug 23, 2023 · 9 comments
Open
2 of 7 tasks
Assignees

Comments

@rbatllet
Copy link

Issue type (mark with x)

  • πŸ€” Question
  • πŸ› Bug report
  • 🎁 Feature request
  • πŸ€·β€β™€οΈ Other

Version (mark with x)

  • 8️⃣ v8.x
  • 9️⃣ v9.x
  • πŸ”Ÿ 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:
Screenshot 2023-08-23 at 10 21 59
Screenshot 2023-08-23 at 10 22 24

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
Copy link
Member

It may be related to this, #1160

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

@rbatllet
Copy link
Author

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.

Screenshot 2023-08-24 at 16 40 11

Screenshot 2023-08-24 at 16 41 43

Screenshot 2023-08-24 at 16 42 19

@bryceosterhaus
Copy link
Member

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
Copy link
Member

pat270 commented Sep 5, 2023

@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
Copy link
Member

pat270 commented Sep 5, 2023

@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
Copy link
Author

rbatllet commented Sep 6, 2023

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
Copy link
Member

pat270 commented Sep 6, 2023

@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 pat270 self-assigned this Sep 6, 2023
@pat270
Copy link
Member

pat270 commented Sep 8, 2023

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

@bryceosterhaus
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants