How to use scss files in Laravel

Question

I have downloaded a free HTML theme.

If I open index.html file of the theme in the browser it works perfectly.

However, now I need to integrate this theme in my Laravel Application. If I inspect element in the index.html file loaded in the browser, I can see that some .scss files are getting called.

The scss folder is present in the theme folder but I really don't know how to include this into my project

Unvalued

read the docs. laravel.com/docs/5.6/frontend#writing-css – Micheal

Place any assets in the /public folder, this is the webroot of your application. – Alphitomancy

Answer 1

You can think of SASS as high level css which provides you with more features like making variable and easier css syntax etc ... but since browsers doesn't understands SASS you have to compile SASS into CSS there are multiple ways to do that.

First if your theme folder already has complied SASS (CSS Folder) you can use it if not and want to integrate with Laravel please follow these steps

1. Copy everything in your SASS Folder and place it in "/resources/assets/sass" so they can be found by Laravel to be compiled

2. now you have to compile SASS into css you can use gulp manually or make use of Laravel mix which is already implemented for you by Laravel

3. Laravel Ships with packages.json file you will find that in your app root directory so before being able to compile SASS you have to run npm install in your root directory (make sure that you have npm and node installed)

4. after running npm install now you can run either one of these to compile any sass files you have in "resources/assets/sass"

   npm run dev //this will compile one time only
   npm run watch //this will automatically watch for any changes and compile 
   

Now your sass files should have been compiled to css you can find the compiled css files in your "public/css" folder.

Hopefully you found this helpful you can read more about this in Laravel docs frontend section specifically Laravel Mix here

Argonaut

Answer 2

The latest version of Laravel utilizes a tool called Vite as a replacement for Laravel Mix.

In order to use Sass with Vite, make sure that Vite and Sass are installed run npm install and npm add -D sass

Make sure you have a sass or scss folder in your projects resources directory, and an scss file inside like app.scss

Make sure that you have configured vite.config.js (which can be found in a new Laravel projects root directory) to include an entry point for sass like so, utilizing the correct path and name for the folder you made:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/scss/app.scss', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

And in your Blade files add the following, again making sure to use the correct path for the folder you made:

@vite(['resources/scss/app.scss', 'resources/js/app.js'])

Then you can build your sass using Vite by running npm run build

Ginnifer

You are a rockstar my man – Johnsson

Thanks, it helped me! But in my case, its: resources/sass/app.scss, and not resources/scss/app.scss – Militia

What if I want to use multiple scss files and don't want to import them all in the app.scss? How would I be able to achieve that? – Swett

More info: laravel.com/docs/10.x/vite – Pulpwood

Answer 3

Laravel has a file called webpack.mix.js where you edit all frontend assets compilation by calling the mix.js/sass with the respective arguments. It is located at the root of the project.

1- In the resources folders create a new folder and call it scss with a app.scss file. The complete tree will be scss/app.scss

2- Go to the webpack.mix.js and add a new line: mix.sass('resources/sass/app.scss', 'public/css');. The first argument of the method is the source file, and the second is the destination folder.

3- In the app.scss file import all the theme scss files using @import 'file/source';

4- Open terminal/cmd in your Laravel project folder and Run npm run dev/watch to compiled your scss file, and at end your css file result will be located in public/css/app.css.

5- Import the app.css into your Html head section and reload the page. If the styles do not work, press ctrl + f5 to clean browser cache.

Protector