Using CLI to add-package --with-source-code for LeptonX theme to Angular site #5916

6 Answer(s)

• 

  0

  Anjali_Musmade created 3 years ago

  Support Team Member

  Hello theChrisMarsh abp get-source Volo.Abp.LeptonXTheme.Pro -o LeptonX You need to download the source, add it to your project and remove the references to the Nuget and replace it with the project reference.

  So, you can change the package reference to the project reference and specify the path as the downloaded source code path.

  For example:

  -    <PackageReference Include="Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX" Version="2.3.*-*" />
  +    <ProjectReference Include="..\..\..\LeptonX\src\Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX" />
  

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  theChrisMarsh created 3 years ago

  Your instructions appear to be for MVC. I have done that, but there is way more in that source than needs to go into the angular project.

  Can you tell me what subfolders (I think some may be in the source-scss/ng.zip file) are needed for Angular ONLY?

  Also, why does the add-package --with-source-code work for the Basic theme, but not the LeptonX theme?

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  Anjali_Musmade created 3 years ago

  Support Team Member

  Hello theChrisMarsh,

  Yes correct source-scss/ng.zip is needed for Angular.

  To add LeptonX code as a project on angular side please try to hit below command at cmd of Angular project or terminal

  abp get-source Volo.Abp.LeptonXTheme.Pro --version 2.3.3

  you may change version as per your requirement.

  please do let me know if it helps you

  Thank you, Anjali

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  theChrisMarsh created 3 years ago

  That is not really that helpful. I already know how to get the source code. I am only trying to modify the Theme and Layout for Angular. My questions are:

  1. What files and folders from the Volo.Abp.LeptonXTheme.Pro source code download are needed for Angular only?
  2. Is it only the files and folders in ng.zip?
  3. What about the files and folders in the /angular/projects folder (which has subfolders lepton-x, lepton-x-abp-core, lepton-x-core, volo-lepton-x folder)
     • Where is the documentation on what each of those projects are for (the README.md file is just marketing stuff and not at all useful).

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  theChrisMarsh created 3 years ago

  Also, it seems there is a defect in the build of the files in the ng.zip source code for version 2.3.3, these are the related files, below that the error.

  postcss.config.js

  autoprefixer: {
      cascade: false,
  },
  

  package.json

    "dependencies": {
      "sass": "^1.57.1",
      "bootstrap": "5.2.1",
      "perfect-scrollbar": "^1.5.5",
      "execa": "~5.1.1",
      "postcss": "^8.4.14",
      "postcss-cli": "^10.0.0",
      "rtlcss": "^3.5.0"
    }
  

  After running yarn build

  Error: Loading PostCSS Plugin failed: Cannot find module 'autoprefixer'
  Require stack:
  - C:\Development\lepton-x\source-scss\ng\postcss.config.js
  
  (@C:\Development\lepton-x\source-scss\ng\postcss.config.js)
      at load (C:\Development\lepton-x\source-scss\ng\node_modules\postcss-load-config\src\plugins.js:28:11)
      at C:\Development\lepton-x\source-scss\ng\node_modules\postcss-load-config\src\plugins.js:53:16
      at Array.map (<anonymous>)
      at plugins (C:\Development\lepton-x\source-scss\ng\node_modules\postcss-load-config\src\plugins.js:52:8)
      at processResult (C:\Development\lepton-x\source-scss\ng\node_modules\postcss-load-config\src\index.js:38:14)
      at C:\Development\lepton-x\source-scss\ng\node_modules\postcss-load-config\src\index.js:162:14
      at async Promise.all (index 0)
  

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  Anjali_Musmade created 3 years ago

  Support Team Member

  Hello theChrisMarsh,

  for your error - Loading PostCSS Plugin failed: Cannot find module 'autoprefixer' you may refer this link https://github.com/webpack-contrib/postcss-loader/issues/187

  And as you are trying to modify the Theme and Layout for Angular please have look to this video link from 21.00 minutes onward https://www.youtube.com/watch?v=R9CqTtn6Wcg

  I hope this will clear all your queries.

  regards, Anjali

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel