Base solution for your next web application
Open Closed

How are Metronic bundles generated from Metronic source? #11440


User avatar
0
tusksoft created

AN0 v11.4.0 (Metronic 8) Angular .net core

Trying to figure out exactly how styles are generated is an absolute pain. The only relevant AN0 docs I have found involve copying a theme. Documentation is severely lacking in this regard.

Where in the metronic source are theme bundles for AN0 being generated from? metronic_v8.x.x\html\theme? Can the angular app also be used for generating themes?

It seems like there are styles missing when generated from the angular app by extracting output via styles in the angular build. My changes in Metronic 8's angular.json for generating bundles:

"styles": [
  "node_modules/primeicons/primeicons.css",
  "node_modules/primeng/resources/themes/saga-blue/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  "src/styles.scss",
  {
    "input": "src/assets/sass/style.scss",
    "bundleName": "style"
  },
  {
    "input": "src/assets/sass/plugins.scss",
    "bundleName": "plugins"
  }
],

This generates css files in the build output that can be placed in our copy of the default theme for style.bundle.css and plugins.bundle.css (generated plugins css is much smaller than the default 68KB vs 622KB and styles bundle is also about 200KB less, unsure why)

Reason why I need to generate styles from the angular app is because we have had a large amount of redesign done via the Metronic Angular app and I need to be able to import the generated styles from that. Any insight you can provide on generating styles from Metronic source is greatly appreciated.


4 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @tusksoft

    We use built outputs of Metronic and those files are just minified during AspNet Zero's build. So, we don't rebuilt Metronic from its source code in AspNet Zero.

    If you want, you can download Metronic's source code, build it and then replace Metronic bundles ( style.bundle.css and plugins.bundle.css) in AspNet Zero.

    If you don't have Metronic source code, you can send email to [email protected].

  • User Avatar
    0
    tusksoft created

    Hi @ismcagdas

    We use built outputs of Metronic and those files are just minified during AspNet Zero's build. So, we don't rebuilt Metronic from its source code in AspNet Zero.

    It would be very helpful to users to explicitly state this in the documentation that it is direct output from Metronic with no modifications. As of right now, the documentation does not guide users at all on the exact steps on generating bundles from metronic's source code. Even a link/path to Metronic's readme's would be helpful.

    If you want, you can download Metronic's source code, build it and then replace Metronic bundles ( style.bundle.css and plugins.bundle.css) in AspNet Zero.

    This is what I am talking about in my original post. I am building from metronic source; however, there are several implementations in Metronic's source code including an angular app. If AN0 is only using the build output from the Html folder, then I will probably need to reach out to Metronic's team to find out if the Angular app's styles (likely based on Demo1) can be brought to parity with the Html main theme's styles.

    I just built the source from Html and the styles are still smaller than the style bundles in AN0. What exact version of Metronic 8 was AN0 11.4.0 built with? I am using Metronic 8.0.26

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @tusksoft

    We will consider adding this to documentation. AspNet Zero's Angular version also uses Metronic's HTML verison's bundle outputs. AspNet Zero v11.4 uses Metronic 8.1.2.

  • User Avatar
    0
    tusksoft created

    Thank you for the confirmation! I reached out to the Metronic support team and confirmed that the Angular demo1 scss is the same as the Html demo 1 scss

    https://devs.keenthemes.com/question/generating-bundles-from-angular-application