Open Closed

Can't resolve bg-transparent.png in theme-lepton error #5145


User avatar
0
mustafa.ozturk created
  • ABP Framework version: v5.3.3
  • UI type: Angular
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): no
  • Exception message and stack trace: ./projects/theme-lepton/src/lib/components/application-layout/application-layout.component.scss?ngResource - Error: Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
    C:\xxx\angular\projects\theme-lepton\src\lib\components\application-layout\application-layout.component.scss:2:2: Can't resolve '../../../../dist/global/assets/backgrounds/bg-transparent.png' in 'C:\xxx\angular\projects\theme-lepton\src\lib\components\application-layout'

  • Steps to reproduce the issue:" I added Lepton theme module from abp suite to the project. It worked for me without any problems. However, application-layout.scss gives an error in my teammates because the dist folder is not created in them.

12 Answer(s)
  • User Avatar
    0
    masum.ulu created
    Support Team Angular Developer

    Hi Mustafa,

    Can we see what's in the theme-lepton folder please ? Just want to be sure there is no any folder like dist, global backgrounds etc. If you have these folders, just be sure you are give the right url path in app-layout.component.scss file

  • User Avatar
    0
    mustafa.ozturk created

    Hi Masum Since I created the lepton theme with the abp suite, these folders are on my computer. And I didn't change url path in app-layout.component.scss. Dist folder exists in my computer and works without any exception but any of my teammates does not have this (dist) directory and they get exception which I shared in my first message.

  • User Avatar
    0
    masum.ulu created
    Support Team Angular Developer

    Hi again Mustafa,

    I've created an project with command below

    abp new Acme.BookStore -csf -u angular -v 5.3.3

    • After that I opened abp suite
    • Go to modules page
    • Click Replace packages with source codes button for Lepton Theme (which I already select)

    Output

    It worked fine for me, can you try the steps and give me feedback please ?

  • User Avatar
    0
    mustafa.ozturk created

    Hi Masum,

    As I described above, I didn't encounter any issues because I performed this process on my own computer. When I pushed the code to Git repository and then another teammate pulled it, we encountered this error on their computer. To reproduce the error, you can follow these steps:

    1. Push the project to the Git repository.
    2. Pull it into another folder and try to start project
  • User Avatar
    0
    masum.ulu created
    Support Team Angular Developer

    Hi again Mustafa,

    I applied your steps exactly and it's still works well, maybe you added assets folder to .gitignore ? Can you send the project to masumulu@volosoft.com mail address ?

  • User Avatar
    0
    mustafa.ozturk created

    Hi again Mustafa,

    I applied your steps exactly and it's still works well, maybe you added assets folder to .gitignore ? Can you send the project to masumulu@volosoft.com mail address ?

    Hi Masum,

    The issue you're experiencing is related to the reference of the bg-transparent.png file, which is being referenced from the dist folder. application-layout.component.scss:

    body {
      background-image: url('../../../../dist/global/assets/backgrounds/bg-transparent.png');
    }
    

    Since the dist folder is mentioned in the .gitignore file, it is not being pushed to the Git repository. Removing the dist folder from the .gitignore file would be an incorrect solution.

    Instead, these types of files should ideally be located under the src/assets folder instead of the dist folder. It seems that there is a bug in the AbpSuite generation process that causes this issue. It is necessary to fix this bug so that the appropriate file structure is generated.

  • User Avatar
    0
    masum.ulu created
    Support Team Angular Developer

    Hello again Mustafa, Can you please share your .gitignore file also, can you please check the is there any other this file.

    Thank you

  • User Avatar
    0
    mustafa.ozturk created

    Hi Masum,

    I sent my .gitignore file that in angular folder at your mail address. You can check.

  • User Avatar
    0
    masum.ulu created
    Support Team Angular Developer

    mail address. You

    Hi again mustafa, I'm sorry I wrote wrong my mail, this is the correct one: masum.ulu@volosoft.com can you please send again the mail ? :)

  • User Avatar
    0
    mustafa.ozturk created

    mail address. You

    Hi again mustafa,
    I'm sorry I wrote wrong my mail, this is the correct one: masum.ulu@volosoft.com
    can you please send again the mail ? :)

    Hi Masum, I sent it to your e-mail address.

  • User Avatar
    0
    masum.ulu created
    Support Team Angular Developer

    Hi Mustafa,

    I'll try again create project and I'll add ignore file to my project. Meanwhile can you try to create same project with your any teammate from scratch and try to re-produce same error again ? Maybe it's specifically happens in your PC ? It's not that clear issue unfortunately I'll try that again also as an alternative can you try create with CLI not with suite ?

  • User Avatar
    0
    masum.ulu created
    Support Team Angular Developer

    Hi again Mustafa,

    Have you tried to create and test steps with CLI, does the error persist ?

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