Roots Discourse

Sage 10 - removing Bootstrap, replacing with tailwindcss 2

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: [],
}

I recommend pulling this branch or waiting until it is merged.
2 Likes

@ knowler
Thanks, i’ll take a look.

I wonder: if I have an already started Sage10 theme and want to use this next branch from now on, what should be a safe way to do it?

And once it gets merged (with changes), how should we upgrade?

Right now I would use a diff tool, but maybe there is a better approach.

Being Sage10 in development now and Sage9 a little difficult to work with, it would be interesting to have the agility to update everything when it gets stable.

Do whatever you are comfortable with. You can certainly use Git to pull in the changes, but if you don’t know how to do that I recommend just using what you’ve got and waiting until the changes are in the main branch. Even using Sage 10 right now is use at your own risk since it hasn’t been tagged and there isn’t any documentation for it. Yes, there’s probably enough enthusiasm in the community about the project right now to provide an adequate safety net, the risk still remains for long term support since there will be no corresponding tags or documentation to trace a pre-tagged Sage 10 project to.

1 Like

One of the reasons I decided to go with Sage 10 was due to @Log1x comment here.

I did initially want to go with sage 9, but after seeing quite a few threads with issues in implementing TW2 in sage 9 I decided to go with Sage 10.

I hope @Log1x branch gets merged soon.

@Atari I am currently happily using TW2 with Sage 9, I had to fork and tune a couple of things but now it works like a charm.

1 Like

@ciromattia I did see your fork when researching, it looked good. I’m going to try and make Sage 10 work, otherwise if I have to go back to Sage 9, I would definitely use your fork.