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

Custom CSS


Hello, im using LARAVEL THEME (Starter Kit) 8.2.3
I need to add my custom.css where i need to include?

Thanks


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 (4)


To include your custom.css in a Laravel project, you should place the CSS file in the public directory of your Laravel application. Here's how you can include it in your blade template:

<link rel="stylesheet" href="{{ asset('css/custom.css') }}">

Make sure to replace custom.css with the actual name of your CSS file if it's different. This line of code will generate a URL for your stylesheet, which you can place in the <head> section of your blade template to apply the styles.

If you're using Laravel Mix and have versioned your CSS file, you can also use the mix() function like this:

<link rel="stylesheet" href="{{ mix('css/custom.css') }}">

This will return the path to a versioned Mix file, ensuring that the browser always gets the latest version of your CSS after you compile your assets.



Thanks for the answer... but...

Im using npm run dev to build public files, if i created on /public/assets/css the file is deleted, thats the reason because i need to know the directory that i need to save the custom.css
And, i need to know in what file inside LARAVEL THEME (Starter Kit) 8.2.3, i need to include
<link rel="stylesheet" href="{{ asset('css/custom.css') }}">

Regards,



Hi Rodrigo Romero

Create your custom.css file in your Laravel project's resources directory, typically located at resources/css/custom.css.

Open your webpack.mix.js file located in the root directory of your Laravel project.

Inside the webpack.mix.js file, you can use the mix.styles() method to include your custom CSS file. Add the following code at the end of the file:

mix.styles([
"resources/css/custom.css",
], "public/css/custom.css");

This code tells Laravel Mix to compile resources/css/custom.css into public/css/custom.css.

Save the webpack.mix.js file.

Run the webpack mix to compile your assets by running the following command in your terminal:

npm run dev


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  :(