When using the Theme Builder in ABP Studio, the generated CSS files are placed in the src/assets/css and styles folders relative to the Angular workspace root.
Is it possible to configure a different output location for these folders? If so, where can we change this setting or configuration files?
8 Answer(s)
-
0
- In ABP Studio Theme Builder (Angular), the output locations for the generated files are not configurable. The builder writes the generated CSS into the Angular workspace under the conventional locations (
src/assets/cssandstyles) and there is no setting / configuration file (in the solution or in ABP Studio) to change these output folders. - If you need a different structure, the practical options are:
- Keep the Theme Builder output as-is and then move/copy the generated files to your preferred folders as a separate step (e.g., via an npm script).
- Adjust your Angular build configuration to consume styles from where Theme Builder writes them (recommended, since it matches ABP Studio’s expectations).
No verified source available for this specific query.
This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) - In ABP Studio Theme Builder (Angular), the output locations for the generated files are not configurable. The builder writes the generated CSS into the Angular workspace under the conventional locations (
-
0
Hi,
The output paths are fixed in Theme Builder. There is no setting or config file to change them, either in the solution or in ABP Studio.
The only thing you can choose is which projects the theme is applied to, in the Select Projects step.
You can copy the files elsewhere after applying a theme, but it won't stick. The next apply recreates them in the original folders and points its own style entries in angular.json back there. So you'd have to redo the copy after every apply.
Could you tell me why you need them in a different place, and how your Angular workspace is laid out? If it's not the standard template layout, that's something we should handle on our side.
Thanks
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
0
Hi,
Thanks for the clear answer.
To your question: our Angular side is not the single-app default template layout. It's a multi-project Angular CLI workspace (
newProjectRoot: "projects") containing two ABP-based applications plus a couple of shared libraries. Each application has its ownroot/sourceRootunderprojects/<app>/…, so the workspace root has no application of its own and no meaningfulsrcfolder.Theme Builder writes the generated CSS to
<workspace-root>/src/assets/cssand<workspace-root>/src/assets/styles, and points the styles entries inangular.jsonat those root-relative paths. That folder is outside every project'ssourceRoot, which gives us two problems:The generated files don't live with the app that consumes them, so they aren't covered by the app's assets configuration, so we have to move them on every change in Theme Builder. We want to have the apps the same theme and share it. What would help us is if the output location followed the selected project instead of the workspace root — i.e. writing to the project's own sourceRoot (
projects/<app>/src/assets/cssandprojects/<app>/src/assets/styles) as resolved from angular.json, and generating the styles entries accordingly. A plain configurable output path per project would work just as well for us.Is support for such a workspace layout something you could consider on your side? Happy to provide a trimmed-down angular.json if that helps.
Thanks
<workspace-root>/ angular.json package.json src/ <-- problem: no application here; only Theme Builder output lands in it ... assets/ css/ styles/ projects/ app-one/ src/ <-- sourceRoot of application 1 app-two/ src/ <-- sourceRoot of application 2 shared-core/src/ shared-ui/ src/Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
0
Hi,
Theme Builder doesn't handle this multi-project Angular workspace layout directly. For now, keep the root-level
srcfolder as the shared theme output and configure both applications to consume it.In each application's
build.options.assets, add:{ "glob": "**/*", "input": "src/assets", "output": "/assets/" }Also add
src/styles.scssto each application'sbuild.options.styles. Copy the generatedsrc/assets/styles/...entries from the application updated by Theme Builder into the other application'sstylesarray.Both applications will then use the same generated theme files, so you won't need to move them after every Theme Builder change. If you add or remove a custom theme style, keep those generated style entries in both applications in sync.
You can share the trimmed
angular.jsonif you want us to map these changes to your file.Thanks
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
0
Hi maliming
Thanks for the suggestion. The workaround works. However: We had hoped that we could include the Theme Builder files in our
shared-uilibrary project.It would really help if you could introduce some sort of ‘basePath’/‘sourceRoot’ for Theme Builder files. Perhaps in
*.abpsln/*.abpmdl? No UI configuration required :-) It would help to keep our project structure tidy.Probably you could consider that. Thank you, Florian
angular.json, see shared-ui section at the end:{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "app-one": { "projectType": "application", "root": "projects/app-one", "sourceRoot": "projects/app-one/src", "prefix": "app", "architect": { "build": { "builder": "@angular/build:application", "options": { "outputPath": { "base": "dist/app-one" }, "index": "projects/app-one/src/index.html", "polyfills": ["projects/app-one/src/polyfills.ts"], "tsConfig": "projects/app-one/tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": [ "projects/app-one/src/favicon.ico", "projects/app-one/src/assets", { "glob": "**/*", "input": "projects/shared-ui/images", "output": "/images/" } ], "styles": [ { "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/font-bundle.css", "inject": false, "bundleName": "font-bundle" }, { "input": "node_modules/@volosoft/abp.ng.theme.lepton-x/assets/css/abp-bundle.css", "inject": false, "bundleName": "abp-bundle" }, // ---- generated by Theme Builder: workspace-root relative, outside any sourceRoot ---- { "input": "src/assets/styles/light.css", "inject": false, "bundleName": "light" }, { "input": "src/assets/styles/dark.css", "inject": false, "bundleName": "dark" }, { "input": "src/assets/styles/dim.css", "inject": false, "bundleName": "dim" }, // ... more entries // ---- end Theme Builder output ---- "projects/app-one/src/styles.scss" ] } }, "serve": { "builder": "@angular/build:dev-server" }, "test": { "builder": "@angular/build:unit-test" }, "lint": { "builder": "@angular-eslint/builder:lint" } } }, "app-two": { "projectType": "application", "root": "projects/app-two", "sourceRoot": "projects/app-two/src", "prefix": "pub", "architect": { "build": { "builder": "@angular/build:application", "options": { "outputPath": { "base": "dist/app-two" }, "browser": "projects/app-two/src/main.ts", "index": "projects/app-two/src/index.html", "polyfills": ["projects/app-two/src/polyfills.ts"], "tsConfig": "projects/app-two/tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": [ "projects/app-two/src/assets", { "glob": "**/*", "input": "projects/shared-ui/images", "output": "/images/" } ], "styles": [ // same Theme Builder entries as app-one -- both apps are forced to // share the single workspace-root output folder { "input": "src/assets/styles/light.css", "inject": false, "bundleName": "light" }, { "input": "src/assets/styles/dark.css", "inject": false, "bundleName": "dark" }, // ... more entries "projects/app-two/src/styles.scss" ] } }, "serve": { "builder": "@angular/build:dev-server" }, "test": { "builder": "@angular/build:unit-test" }, "lint": { "builder": "@angular-eslint/builder:lint" } } }, "shared-core": { "projectType": "library", "root": "projects/shared-core", "sourceRoot": "projects/shared-core/src", "prefix": "lib", "architect": { "build": { "builder": "@angular/build:ng-packagr" }, "test": { "builder": "@angular/build:unit-test" }, "lint": { "builder": "@angular-eslint/builder:lint" } } }, "shared-ui": { // Theme Builder entries should live here :) <--- "projectType": "library", "root": "projects/shared-ui", "sourceRoot": "projects/shared-ui/src", "prefix": "lib", "architect": { "build": { "builder": "@angular/build:ng-packagr" }, "test": { "builder": "@angular/build:unit-test" }, "lint": { "builder": "@angular-eslint/builder:lint" } } } } }Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
0
Hi,
There's no setting for this yet. Theme Builder always writes to the root of the Angular workspace, and there's nothing in
.abpslnor.abpmdlto change it.We don't have plans to add this for now. The shared root
srcsetup you're using is the way to go.Thanks
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
0
Not the answer I hoped for, but thanks anyway.
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
