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
Related
I have installed Laravel 5.8, updated my Tailwind version 0.1 to 1.1.4 and Bootstrap. My updated tailwindcss is not been read by the Laravel whenever I run the project. I have put a "tw-" to separate the Bootstrap from the tailwindcss like highlighted below. Still my tailwindcss is not working. Can anybody assist ...
options: {
prefix: 'tw-',
important: false,
separator: ':',
},
If you installed Bootstrap before and you haven't removed the bootstrap #import from your app.scss file - then tailwindcss will not be taken under account as it has its own #import directives. Make sure you remove the bootstrap first. You can't really use both. It's either / or.
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
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