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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
{ "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "cross-env": "^7.0.3", "laravel-mix": "^6.0.49", "laravel-mix-merge-manifest": "^2.1.0", "sass": "^1.62.1", "sass-loader": "^13.2.2", "vue": "^3.2.47", "vue-template-compiler": "^2.7.14" } } |
Step 2
Now create a file called webpack.mix.js in the root directory of the package as stated below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
const mix = require("laravel-mix"); if (mix == 'undefined') { const { mix } = require("laravel-mix"); } require("laravel-mix-merge-manifest"); if (mix.inProduction()) { var publicPath = 'publishable/assets'; } else { var publicPath = '../../../public/themes/default/assets'; } mix.setPublicPath(publicPath).mergeManifest(); mix.disableNotifications(); mix.js([__dirname + '/src/Resources/assets/js/app.js'], 'js/app.js') .copyDirectory(__dirname + '/src/Resources/assets/images', publicPath + "/images") .sass(__dirname + '/src/Resources/assets/sass/admin.scss', 'css/admin.css') .sass(__dirname + '/src/Resources/assets/sass/default.scss', 'css/default.css') .sass(__dirname + '/src/Resources/assets/sass/velocity.scss', 'css/velocity.css') .options({ processCssUrls: false }); if (! mix.inProduction()) { mix.sourceMaps(); } if (mix.inProduction()) { mix.version(); } |
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
Be the first to comment.