How to setup the Laravel Mix on version 5.4 to do css livereloading whenever the sass files get compiled? All the tutorials I found are relating to older versions.
I have installed the node modules, and I am running the watch by npm run watch, as stated on the tutorial https://laravel.com/docs/5.4/mix#sass. So far the webpack.mix.js is as follows:
const { mix } = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Here is how to configure Webpack LiveReload for Laravel >=5.4 and Laravel.mix https://komelin.com/articles/configuring-webpack-livereload-laravelmix
Related
On a Laravel application, while trying to run:
npm run dev
I get the following message:
npm run dev
dev
npm run development
development
mix
Mix was not set up correctly. Please ensure you import or require laravel-mix in your mix config.
99% done plugins BuildOutputPlugin
node version: v14.18.2
npm version: 8.2.0
No js and css output to public/js and public/css is being produced and I get no other error.
I removed and readded node-modules folder several times..
Any ideas how can I solve this issue pls?
For me, the solution for this error is to insert this line at the top of the webapck.mix.js file:
let mix = require('laravel-mix');
I want to use autocomplete in Laravel Mix. The tutorial I saw was using vue-cli and it's working. It is using tailwind, but when I implement it in Laravel Mix using npm install, it does not work. I used a tutorial to install Tailwind in Laravel Mix but I can not find tailwind.js under resources/js. If I want to write a manual how I write those file link tutorial below.
https://sandulat.com/blog/installing-tailwind-into-laravel/
Tailwind.js will not be generated in resources/js. When you run
npx tailwind init
or
./node_modules/.bin/tailwind init
the tailwind.js will be placed in the directory your terminal is currently in. Your webpack.mix.js would look something like this:
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [tailwindcss('./tailwind.js')],
});
Note the processCssUrls: false, this IS required for mix to compile tailwind.
You could also install a simple npm package:
Laravel Mix Tailwind
Install Node
Install NPM
Go to the project folder root in the file: webpack.mix.js.
mix.styles([
'public/css/vendor/normalize.css',
'public/css/vendor/videojs.css'
], 'public/css/all.css');
Mix automatically minifies your CSS when running
npm run production
Laravel 5.7 Mix - Running Mix
As per the documentation of Google Material Components, I am unable to find a way to integrate it with Laravel. The steps mentioned there to configure the webpack are mentioned however I am unable to find a suitable way to put it in Laravel Mix.
So the question is how to integrate google material components(not the lite version) into Laravel project.
With Laravel Mix, integration of Material Components is easier than with plain Webpack config.
First, install default Laravel project's Node dependencies, and make sure that you have node-sass and sass-loader installed, and, of course, add material-components-web:
npm i
npm i node-sass sass-loader -D
npm i material-components-web -S
Then, assuming that you have an app.js in resources/assets/scripts folder and app.scss in resources/assets/sass folder, your webpack.mix.js should look something like this:
const mix = require('laravel-mix')
mix
.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css', {
includePaths: ['node_modules']
})
Then, in app.js and app.scss you import ES2015 and Sass respectively the same way as described in MDC Web documentation.
Here I described how to install Vanilla JS project. If you're interested in Vue.js, then you can add Vue.js wrapper for MDC-Web (Vue MDC Adapter):
npm i vue-mdc-adapter -S
Then, use it as described in Vue MDC Adapter documentation.
I am a beginner to this framework. i have added new css files in my sass folder and compiled them successfully to use.
How can i add new js file in assets folder and compile them to use ?
You can do somethink like this but before stop npm compiling:
mix.js('resources/assets/js/app.js', 'public/js')
.js('resources/frontend/js/scripts.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.sass('resources/frontend/scss/style.scss', 'public/css');
And then run just npm run dev or npm run watch.
i concluded some things as a beginner:
1. we put our js or css files in assets/css, assets/js folder and using webpack.min.js we compile this files and minimize.
2. after compilation, the compiled code generates in public/css, public/js folders accordingly.
3. My js file has some external links and things as i am using a theme for a blog, and it is getting issues in compilation.
4. the solution is to put your files directly in public/js or public/css folders .
If anyone has any further suggession... please share.
Thanks