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
Replies (4)
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 devThanks 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,
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.
