How to Implement CSS and JS in new Package in Bagisto

Updated 19 May 2023

Today we are going to learn “How to Implement CSS and JS in a new Package in Bagisto”, Here are some steps to follow :-

Step 1

Firstly create a package.json file in the root directory of the Custom Package with some dependencies with the latest version as stated below code

Step 2

Now create a file called webpack.mix.js in the root directory of the package as stated below

The above file uses laravel-mix dependency for compiling modern JavaScript and triggering a CSS preprocessor and also using laravel-mix-merge-manifest which merges new manifests into the existing ones and there are some functions that are js(), css() first parameter – path of the module scss and js and second paramter – public path of css and js this is used for compiling the respective files

Step 3

Go to the module path that is package/Webkul/<packagename> on the terminal and run a command – npm install you will get a folder called node_modules

Now we have Two commands:-

npm run prod – This command is used in the production mode and by this command firstly files go to the publishable folder and after running php artisan vendor:publish –force :- press the module no. and enter files go to the public folder from where it will be access

npm run watch  – This command is used in the Development mode and after running this command files directly go to the public folder from where it will access

Step 4

First, run the above command at the package path and then add your changes in the scss and js files and then check on the instance

That`s all for implementing “CSS and JS in the new Package in Bagisto “.

You can also hire laravel developer for custom service and for extension, you can explore our Extensions

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home