I’ve just installed sage 10 (current version) and everything is working fine. But if I use in app.scss some tailwind styling with @apply, mix compiles (very slowly) but the page doesn’t not reload. Is there something to change in the mix config ? And is there a way to make the compiling faster. Apparently If I use @apply in a SCSS file, mix recompiles everything: fonts, js, manifest.asset.php, and both css (app and editor).
Here is my (untouched) webpack.mix.js - besides the url in browsersync where I had to put https:// in front of my local domain (i use local by flywheel).
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('https://galiffe.test');
mix
.sass('resources/styles/app.scss', 'styles')
.sass('resources/styles/editor.scss', 'styles')
.options({
processCssUrls: false,
postCss: [require('tailwindcss')],
});
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();
My mac Monitor controls shows a node process rising to 150% during the build time which is about 8 secondes.
it is a powerbook from 2018 with an SSD with the latest mac os - I think my mac is fine !
I’ve read it. but no I don’t think it changes anything. but can you reproduce this ? It is just a bare bone sage 10 installed with “composer create-project roots/sage your-theme-name dev-master” as mentionned in the official repo. Do you think it could be linked to Local by Flywheel (latest version 5.9.9) ?
Not reloading is a feature not a bug. It applies the new CSS without browser reloading.
For the slow build, SASS triggers a Tailwind build every change, I recommend you switch to normal css with postcss-nested.
Hello,
I’ve tried with postcss and postcss-nested but a simple background-color takes 7 seconds to compile, this is not really usable.
Do you have a working config ?
Here is mine (not sure how to handle the 2 css files but this is another pbl.
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('https://galiffe.test');
// mix
// .sass('resources/styles/app.scss', 'styles')
// .sass('resources/styles/editor.scss', 'styles')
// .options({
// processCssUrls: false,
// postCss: [require('tailwindcss')],
// });
mix
.options({processCssUrls: false})
.postCss('resources/styles/app.css', 'styles', [
require('postcss-import'),
require('tailwindcss'),
require('postcss-nested'),
// require('postcss-custom-properties'),
require('autoprefixer'),
]);
// .postCss('resources/styles/editor.css', 'styles', [
// require('postcss-import'),
// require('tailwindcss'),
// require('postcss-nested'),
// // require('postcss-custom-properties'),
// require('autoprefixer'),
// ]);
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();
That’s caused by the postcss-import package. You also don’t need to explicitly require autorprefixer as Mix includes it by default
This part of your config should look something like this
Note: a drawback to removing postcss-import is having to restart yarn start whenever you add a new class via tailwind’s config and need to use it via @apply
That works thank you. But it stays incredibly slow: 5-6 seconds if I had something as simple
body {
@apply bg-red-500;
}
And it is the same if I rather add
body {
background-color: red;
}
In both case, no styles is injected, I have to manually reload the page to see the change.
Is there a way to have the style injected and make the compiling faster ? Or is it normal like this ?
I repeat, I just installed latest sage 10 with “composer create-project roots/sage your-theme-name dev-master” on brand new install of wordpress on latest local by flywheel setup. There are no styles injected and the compile time is more or less always between 5 and 8 seconds, whatever config I use: the one delivered (sass) or postCss.
here is the postCSS config:
Profiling is a way to measure the performance of an application/script. It usually shows a tree of methods with information about how many times they are called and how long their execution need. This allows to spot the parts that take all the build time (probably some loop issue).
hopefully there is a fix soon ! Thank you for taking the time for this.