How to write and compile custom SCSS into Laravel Metronic?
Hi guys,
I was wondering: how can I write some custom SCSS, put in the correct folder and get that file compiled (and so converted in CSS and push in the correct folder/in the correct file's code in public/assets) for it to be able to be consumed by my pages?
I've tried different methods but none felt the right intended way:
- added thanks to the
theme()->addCssFile('public/assets/css/custom.css');directive eventhough I have to convert the file from SCSS to CSS manually via online tools and then put in public/assets - added the file path in config/settings.php in the 'KT_THEME_ASSETS' array
- added via the @push('styles') directive directly in the view (this doesn't work if the file isn't available in public/assets obviously
- tried to include the file path in resources\_keenthemes\tools\gulp.config.js but didn't work
For now I'm using the controllers' directive and manually putting the CSS converted files in public/assets but I strongly believe this is not how you do it.
Can you help me understand how to write and include in the correct folder/files custom SCSS code?
Thanks in advance!
Replies (5)
Hi Lore Porre
You can put your custom JS file anywhere within the resources folder, then include the file reference path into /starterkit/resources/mix/scripts.js. It will be included in the assets build.
Thanks
Hi,
Please add resources/_keenthemes/src/demo1/sass/_custom.scss custom SCSS file and write your custom code in it and include this file in the entry style resources/_keenthemes/src/demo1/sass/style.scss as shown below:
//
// Theme style
//
// Initialize
@import "init";
// Components
@import "components/components";
// Layout
@import "layout/base/layout";
@import "layout/layout";
// Custom
@import "custom";Regards.
You're a wonderful human!
Just one question, since I'm using the Laravel starterkit my project doesn't have the middle demo1 folder, can I simply use the resources/_keenthemes/src/sass/_custom.scss path?
Thanks so much!
Yes, please update the path to match with your folder structure.
Thank you
Can I ask one more thing?
How would you do the same thing but for custom JS code? I can't see any app.js file in resources/* into which I can include custom js files..
Maybe resources\mix\plugins.js?
Or maybe I need to include them in the config/settings.php or gulp.config.js files?
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
