Open Closed

Customizing source scss files of LeptonTheme with angular #2115


User avatar
2
MILLENNIUM created

If you're creating a bug/problem report, please include followings:

  • ABP Framework version: v4.4.3
  • UI type: Angular
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): yes
  • Exception message and stack trace: No Errors
  • Steps to reproduce the issue:"
  • Insall Lepton theme with source code using Abp suite
  • Change the source leptonY.scss then run gulp minify and bundle the theme
  • Run angular system, it takes the affects of customized theme
  • Keep the system runing and rechange the source leptonY.scss then run gulp
  • The problem is that changes are not reflected to the runing angular App!

Note: The designer needs to he his changes directly upon changes source scss files using gulp watch, so he can customize the theme easily Please note that we do not want to add custom style that Overrides the default theme, we want to customize the theme itself (since we have the source scss of it) which make it easier and faster for us and keep styling code is clean

Can you support us to find a way to see changes of scss files very quicly on the running angular system, (similar to hot reload) ( I remember this feature was up and runing in old versions 4.X.X , cannot tell which one)


6 Answer(s)
  • User Avatar
    0
    bqabani created

    We face the same issue we have been trying to solve this for three days

  • User Avatar
    -1
    bunyamin created

    Hello,

    Could you try to override the lepton styles as mentioned in this document?

  • User Avatar
    0
    MILLENNIUM created

    Hello,

    Could you try to override the lepton styles as mentioned in this document?

    Dear bunyamin ,

    I already read the document you referenced, this is not what we want, Please kindly read the issue again,

    Thank you

  • User Avatar
    1
    bunyamin created

    Still, you can achieve what you want with what I have suggested. You don't need to use a gulp file since angular-cli creates projects with a built-in sass bundler. You can put all of the scss files within your project and import them in styles.scss and set customStyle to true so that built-in lepton styles won't be loaded in your application.

  • User Avatar
    0
    bunyamin created

    Hello,

    Is your problem solved? If so, I'll close the issue.

  • User Avatar
    0
    MILLENNIUM created

    Dear Bunyamin,

    Thank you for the advice, it helped me to solve the issue,

    Actually what I did is copying all the LeptonTheme Scss source files to the host angular project (not the theme-lepton project) and then I referenced it that folder according to the doc you shared with me, that solved the problem

    Thank You Very much

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11