Hi I am trying to get the compilation of the LESS files working in v 6.7 Angular using the Gulp file. The only example I’ve seen so far appears to be for the MVC version. Does anyone have a working version for Angular? Ideally a gulpfile that compiles the Metronic files too…but even the LESS files would be a good start.
Also - can you please confirm if we need a package-mapping-config.js file for the Angular version.
7 Answer(s)
-
0
@xugowebteam
On Angular side, you don't have to compile less files. Angular-cli automatically does this. You can directly use less files in angular.json.
Also - can you please confirm if we need a package-mapping-config.js file for the Angular version.
package-mapping-config.js is nothing to do with Angular version and it shouldn't be in Angular version.
-
0
@ismcagdas - can you provide a litttle more detail about how this angular.json file works please
Some more questions:
- Do the files that are referrenced in angular.json get bundled into style.bundle.css?
- is there a way (using the angular-cli / angular.json to compile LESS files into a sperate CSS files of the correspsonding name? So metronic-customize.less compiles to metronic-customize.css etc. ?
- If we are wanting to also compile Metronic source files, can we do that using the angluar.json file or would we need to use Gulp?
Currently some of our LESS files are being compiled, but it is only those that belong to a particular component. They seem to get injected into the page using a <style> tag.
I've never worked with angular before, so I'm unclear on how it is supposed to work.
-
0
Hi,
Auctually we are using https://github.com/angular/angular-cli and it handles all task for us.
- Yes, style files are bundled together.
- I'm not sure about this, you can check angular-cli's documentation.
- Yes, you can use angular.json, you don't need Gulp.
-
0
@ismcagdas - thanks for the response.
re: No. 2
I'm not sure about this, you can check angular-cli's documentation.
Kind of surprised at the answer to this. After all, these are the main Less files for the Theming. Surely the compilation should work right out of the box, without users having to consult the angular-cli docs.
-
0
@xugowebteam
It works but you are talking about creating seperate css files and as far as I know angular-cli doesn't support it. Metronic uses gulp to bundle its style and script files. Since we don't want to deal with bundling Metronic styles, we are using its bundled version.
If you include less files from Metronic source it will work but if you want to create a seperate css for Metronic bundles, I'm not sure if it will work or not.
-
0
@ismcagdas
But what about the Less files such as:
metronic-customize.less /themes/blue/metronic-customize-angular.less
The way that you guys have set up the framework, is that they do not get bundled into style.bundle.css...but instead are referenced as their own independent CSS files in the HTML.
So I can only assume that your intention was for them also to be compiled separately? This is why I find it hard to understand why the compilation of these particlaur files is not working straight 'out of the box'.
In some old posts I 've seen the WebCompiler (Visual Studio) extension being recommended. But that doesnt work for me as Im on Mac.
-
0
@xugowebteam
Sorry, I understand you know. Actually those files should be removed from source code and only css files must be used for theme base metronic classes. At least for know until we find a better solution.
