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
You can check to see if it is installed by taking a look at your package. json file, this is contained in the root of your project. The next stage is to create a sass directory within the resources assets folder. Create a directory called sass underneath the assets folder.
blade. php file in side the pages folder and css file is in the public/css folder.
SASS (Syntactically Awesome Style Sheets) is a pre-processor scripting language that will be compiled or interpreted into CSS. SassScript is itself a scripting language whereas SCSS is the main syntax for the SASS which builds on top of the existing CSS syntax.
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
Copy everything in your SASS Folder and place it in "/resources/assets/sass" so they can be found by Laravel to be compiled
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
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)
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With