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
Related
I am trying to use auth in laravel and while the auth controllers and views are created properly, the css / js files are empty. I have tried npm install and when I run npm run dev but no luck with CSS / JS.
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');
What is the workflow of installing and using any js/css library using npm in laravel 8. What steps should I follow?
For an example let's say I want to install fontawesome using npm and use it in my laravel project. What I know is, once I run the npm install --save #fortawesome/fontawesome-free command it creates a folder for that inside node_modules.
I don't know what should I do after npm install --save #fortawesome/fontawesome-free.
How can I get to know what to do inside resources/css/app.css and webpack.mix.js and what next for any js or css library?
You can use laravel mix, based on my experience the general step to use any css / js package from npm to laravel mix is :
npm install.
import the css needed by the library to resources/sass/app.scss
require js script needed by the library to resource/js/bootstrap.js
npm run development or npm run production to rebuild the app.css and bootstrap.js.
For fontawesome you can read further in this tutorial:
https://dev.to/dendihandian/adding-font-awesome-to-laravel-the-laravel-mix-way-4ndj
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.
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