Metronic - Symfony - AssetMapper
Hi all, I'm trying to use metronic with Symfony, and AssetMapper from symfony.
I have at the root of my project a folder _keenthemes with which I build the theme sources. The compiled sources fall into my assets/metronic folder as defined in webpack.config.js in the "tools" folder.
Styles etc. work.
However, I get this error: Uncaught ReferenceError: KTApp is not defined
In my console.
Could you please tell me how to integrate metronic with AssetMapper from Symfony?
Best regards,
Pierre
Replies (2)
Hello,
I managed to find a solution, and a way to make the Metronic template work with Symfony & Asset mapper and the Tailwind version.
Here's my procedure:
Install the bundle: https://symfony.com/bundles/TailwindBundle/current/index.html
When the bundle is created, in my case I had a frontend with the file assets/styles/app.css and a backend (with the metronic theme) so I created a file in assets/styles/admin.css, both of them.
As I only want to use it on the admin side, I put this in my admin.css file
import "./bootstrap.js";
// Folder vendor from metronic-v9.0.4\src\vendors
import "./admin/vendors/keenicons/solid/style.css" ;
import "./admin/vendors/keenicons/outline/style.css" ;
import "./admin/vendors/keenicons/filled/style.css" ;
import "./admin/vendors/keenicons/duotone/style.css" ;
import "./styles/admin.css";
// Folder js from metronic-v9.0.4\dist\assets\js
import "./admin/js/core.bundle.js" ;My tailwind.config.js file is exactly the same as the one in the theme, except for this part:
/** @type {import("tailwindcss").Config} */
module.exports = {
content: [
"./assets/**/*.js",
"./templates/**/*.html.twig",
],
// Other config from tailwind.config.js file in metronic-v9.0.4 folder
}In your base.html.twig do :
{{ importmap('admin') }}
NB: “admin” is a custom file I created myself, so don't forget to add it to symfony's importmap.php file if necessary.
Then build the :
php bin/console tailwind:build // to build the app.css file
php bin/console tailwind:build assets/styles/admin.css // to build a custom file, for example (in my case, admin.css).NB if you have several CSS entries with tailwind, you'll need to add the code below to your services.yaml (and not create a symfonycast_tailwind.yaml file, as it doesn't take this into account, I don't know why):
symfonycasts_tailwind:
config_file: "%kernel.project_dir%/assets/tailwind.config.js" // The tailwind.config.js config file is also in my assets/ folder.
input_css:
- assets/styles/app.css
- assets/styles/admin.cssAnd that's it; Normally it should work!
Hi Pierre,
Apologies for the delay in response. Regarding the "Uncaught ReferenceError: KTApp is not defined" issue, it might be related to the order in which the assets are imported.
In Metronic, the order of importing assets is crucial. Ensure that you are importing the required JavaScript files in the correct order. For example, you may want to include plugins.bundle.js first, followed by scripts.bundle.js.
If you're using the HTML version of Metronic, you can refer to the order in which assets are included in the HTML files. Try to replicate a similar order when including assets in Symfony using the AssetMapper.
If the issue persists, feel free to share more details about how you're currently importing the assets.
Thank you
