How to Properly Add Custom CSS for a Specific View in Metronic with Gulp?
Hi,
I have Asp.Net Core application using the Metronic v8.2.9 Bootstrap theme.
I have a question regarding adding a new CSS file for a specific view in my ASP.NET Core MVC project. For instance, I want to include a custom order.css file specifically for the Order view.
To achieve this, I plan to add it to the view using:
KTTheme.AddCssFile("/assets/css/custom/order.css");
This works as expected when I manually place the file in wwwroot/assets/css/custom/order.css. However, when I run the gulp --demo1 command, the order.css file gets deleted during the build process.
My Questions:
1- Is the correct approach to add a new .scss file (e.g., order.scss) to the _keenthemes/src/demo1/sass directory?
2- If I add it there, are there any additional steps I need to take (e.g., importing it into another .scss file)?
3- How can I ensure that a custom CSS file for a specific view does not get overwritten or removed when running gulp --demo1?
In summary, what is the best practice for adding a custom CSS file for a specific view in Metronic, ensuring it persists across Gulp rebuilds and follows the theme's conventions?
Replies (3)
Hi,
If you want to include a plain CSS file, simply place all custom CSS files outside the assets folder. Our Gulp script will regenerate the assets folder, but other files in the wwwroot directory will remain untouched.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi,
So, the general approach for new screens is to never place JS, CSS, or image files under the _keenthemes/ directory that the Gulp script processes? Instead, I should always use a directory outside of the assets folder where Gulp won’t overwrite files?
Also, in the documentation, you mentioned:
You can load a file for a separate view inside your page view Razor file.
@{
KTTheme.AddJavascriptFile("/js/site.js");
}
However, AddJavascriptFile only works for files inside the "assets" folder. This makes it unusable for loading files specific to a view.
Hi,
You can put your custom scripts to _keenthemes/src/demo1/js/custom, putting custom files directly to wwwroot/assets folder is not recommended since this folder will be overwritten every time you execute gulp command.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
