Thanks for any help, first time using Sage 10!
I have done the following:
Removed Bootstrap and Popper from package.json
Added tailwindcss@latest, postcss@latest, autoprefixer@latest to package.json
added tailwind.config.js to root of theme
Edited webpack.mix.js like so:
const mix = require('laravel-mix');
require('@tinypixelco/laravel-mix-wp-blocks');
require('laravel-mix-copy-watched');
/*
|--------------------------------------------------------------------------
| 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('./dist')
.browserSync('https://dev.test');
mix
.sass('resources/assets/styles/app.scss', 'styles')
.sass('resources/assets/styles/editor.scss', 'styles')
.options({
processCssUrls: false,
postCss: [
require('tailwindcss')('./tailwind.config.js'),
]
});
mix
.js('resources/assets/scripts/app.js', 'scripts')
.js('resources/assets/scripts/customizer.js', 'scripts')
.blocks('resources/assets/scripts/editor.js', 'scripts')
.extract();
mix
.copyWatched('resources/assets/images/**', 'dist/images')
.copyWatched('resources/assets/fonts/**', 'dist/fonts');
mix
.autoload({ jquery: ['$', 'window.jQuery'] })
.options({ processCssUrls: false })
.sourceMaps(false, 'source-map')
.version();
Removed import ābootstrapā from app.js
Removed Bootstrap imports from both app.scss and editor.scss and replaced with @tailwind directives
I had the issue of when I run yarn build:production I get a 404 for /dist/scripts/vendor.js
so I edited setup.php to only load vendor when it exists, like so:
/**
* Register the theme assets.
*
* @return void
*/
add_action('wp_enqueue_scripts', function () {
if (asset('scripts/vendor.js')->exists()) {
wp_enqueue_script('sage/vendor.js', asset('scripts/vendor.js')->uri(), ['jquery'], null, true);
wp_enqueue_script('sage/app.js', asset('scripts/app.js')->uri(), ['sage/vendor.js', 'jquery'], null, true);
wp_add_inline_script('sage/vendor.js', asset('scripts/manifest.js')->contents(), 'before');
} else {
wp_enqueue_script('sage/app.js', asset('scripts/app.js')->uri(), ['jquery'], null, true);
}
if (is_single() && comments_open() && get_option('thread_comments')) {
wp_enqueue_script('comment-reply');
}
wp_enqueue_style('sage/app.css', asset('styles/app.css')->uri(), false, null);
}, 100);
/**
* Register the theme assets with the block editor.
*
* @return void
*/
add_action('enqueue_block_editor_assets', function () {
if (asset('scripts/vendor.js')->exists()) {
if ($manifest = asset('scripts/manifest.asset.php')->get()) {
wp_enqueue_script('sage/vendor.js', asset('scripts/vendor.js')->uri(), $manifest['dependencies'], null, true);
wp_enqueue_script('sage/editor.js', asset('scripts/editor.js')->uri(), ['sage/vendor.js'], null, true);
wp_add_inline_script('sage/vendor.js', asset('scripts/manifest.js')->contents(), 'before');
}
} else {
wp_enqueue_script('sage/editor.js', asset('scripts/editor.js')->uri(), null, true);
}
wp_enqueue_style('sage/editor.css', asset('styles/editor.css')->uri(), false, null);
}, 100);
The 404 error is gone now, but I wanted to check if this the correct way to remove Boostrap?
Also can I safely remove jQuery, or do I need to leave it in for customiser.js ?
Also for editor.scss I have:
.editor-styles-wrapper > * {
@tailwind base;
@tailwind components;
@tailwind utilities;
}
But tailwind styles i have safe-listed are not showing up in Gutenburg, any help here would be great.
tailwind.config.js
module.exports = {
purge: {
content: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
// These options are passed through directly to PurgeCSS
options: {
safelist: ['bg-red-100', 'px-4'],
}
},
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}