Hi, i have a problem with slow compile files (small project ~ 20sec) in watch mode after i added custom css to my .scss files.
I want to update tailwind and use yit mode, but it doesnt work for me.
What i do:
Update Tailwind version npm install tailwindcss@latest
Activate yit mode mode: 'jit' in first line module.exports
Install cross-env - probably is required to change node env in windows npm install --save-dev cross-env
Terminal say Compiled Successfully in 165ms, but browsersync doesnt work. After manually refresh page i also dont see changes in css. After next run yarn start the changes are visible, but after every change css i dont see changes.
OK, i tested jit on base theme sage 10. JIT work fine on watch mode, but problem is when i added some fonts or images. It takes less than a second to compile, but there are no changes to the page or a long delay. Is it possible to configure watch in such a way that it omits images and fonts?
I have only images and fonts in project directories, but i dont use they.
After build:production i have the same problem.
I have 20 images and now yarn watch is faster when i remove mode: jit from tailwind config.
Regarding my question: “If this does not help. How to you reference the newly added image?”
By @asset(‘image’) or hardcode the path?
Do you reference the resources folder? Or the public folder?
Did you update the webpack.mix.js?
Like so and added tailwindcss?
This repository is an example. Without images, everything work on yarn watch in a few ms. AFTER adding images to the directory, executing `` yarn build: production yarn watch``` definitely slowed down.
I have probably found a solution. Many tests meant that I didn’t know if the photos were a problem and I started looking in a different direction. It seems to me that the problem was browserSync, which may not work fast enough on the * .local domain. I changed my domain to * .dev and the work has been really fast for the last few hours. I hope it stays that way.
I was going to post in the original JIT discussion but these topics close so quickly that I can’t so I am posting here.
I thought I had all of the Sage 10 / Tailwind 2.0 / JIT stuff sorted out on MAC. I just finished a project using that setup and it worked great! BrowserSync worked great as well.
I’ve setup a new project to work on with that exact setup and now BrowserSync is not working.
The dev url, trellis.project.build will work just fine but when I run yarn start, the localhost url opens in a new tab and it just spins and spins.
I’m trying to narrow down what the issue could be.
This is my webpack.mix.js file. I’m using port 8888 and I’ve tried several others.
const mix = require('laravel-mix');
require('@tinypixelco/laravel-mix-wp-blocks');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Sage application. By default, we are compiling the Sass file
| for your application, as well as bundling up your JS files.
|
*/
mix
.setPublicPath('./public')
.browserSync({
proxy: 'http://trellis.project.build',
port: '8888'
})
mix
.sass('resources/styles/app.scss', 'styles')
.sass('resources/styles/editor.scss', 'styles')
.options({
processCssUrls: false,
postCss: [require('tailwindcss')],
postCss: [require('@tailwindcss/jit')],
});
mix
.js('resources/scripts/app.js', 'scripts')
.js('resources/scripts/customizer.js', 'scripts')
.blocks('resources/scripts/editor.js', 'scripts')
.autoload({ jquery: ['$', 'window.jQuery'] })
.extract();
mix
.copyDirectory('resources/images', 'public/images')
.copyDirectory('resources/fonts', 'public/fonts');
mix
.sourceMaps()
.version();