Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

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!
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(