Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

Custom SCSS in Laravel Start Kit


I'm having a problem with laravel mix about adding new scss or js sad

What is the best practice to add custom scss or js in laravel start kit?

ex.

I have a page

view - resources/view/page/homepage.blade.php
scss - <where>/page/homepage.scss
js - <where>/page/homepage.jssad


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

Hi James,

Sure, here is a better answer:

The best practice to add custom SCSS or JS in Laravel Start Kit is to use the addJavascriptFile() function. This function takes a path to a JavaScript file as its argument. For example, to add the file assets/js/custom/authentication/sign-in/general.js, you would use the following code:

 addJavascriptFile('assets/js/custom/authentication/sign-in/general.js');

You can also use the addStylesheet() function to add a custom SCSS file. This function takes a path to a SCSS file as its argument. For example, to add the file assets/scss/custom/authentication/sign-in/general.scss, you would use the following code:

 addCssFile('assets/scss/custom/authentication/sign-in/general.scss');

You can find more examples of how to use these functions in the following files:

 app/Http/Controllers/Auth/AuthenticatedSessionController.php
 app/Core/Bootstrap/BootstrapDefault.php

I hope this is helpful!

Thanks

Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(