hi everyone,
i kinda having a hard time developing in sage because of the long compile time in each file change, the laravel mix seems to recompile/copy every file that i don’t change, including JS, Images, etc.
is there a way to only recompile only changed files such as only css or only js on each file change?
here’s my webpack.mix.js
mix.disableNotifications();
mix
.setPublicPath('./public')
.browserSync({
ghostMode: false,
proxy: 'localhost/wordpress',
notify: false,
ignore: ['/node_modules/'],
open: false,
});
mix
.sass('resources/styles/app.scss', 'styles')
.sass('resources/styles/custom.scss', 'styles')
.sass('resources/styles/editor.scss', 'styles')
.options({
processCssUrls: false,
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();
and my css files
//app.scss
@import 'tailwindcss/base';
@layer base {
// html {
// font-size: 18px;
// }
body {
font-size: 16px;
}
}
// @import 'common/global';
// @import 'components/hamburger';
// @import 'components/navbar';
// @import 'components/button';
// @import 'components/landingSection';
// @import 'components/card';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
custom.scss
@import ‘common/global’;
@import 'components/hamburger';
@import 'components/navbar';
@import 'components/button';
@import 'components/landingSection';
@import 'components/card';
and even if i only change the blade markup, it took so long to refresh the browser (up to 4 seconds)
is there a way to make the browser refresh faster?