Installing Sage 10 with Bootstrap 5

[Tartamata]

Hi everybody,

When installing Sage 10 using :
composer create-project roots/sage your-theme-name dev-master

I don’t get the option to choose css framework, TailWind is installed by default!!

Is there a way to install Sage 10 along with bootstrap 5 ? Im i missing something ?

Is is safe to work with sage 10 on a new project ?

Thanks

[ben]

Hey @Tartamata - Sage 10 does not yet have an installer/support for choosing a different CSS framework

You can definitely swap out Tailwind for Bootstrap in Sage 10, but you’ll have to do so manually for now

[Tartamata]

Thank you @ben
How can i do it manually ?

[ben]

You’d swap out the dependencies and any references to Tailwind classes in the styles and Blade templates

[Tartamata]

Ok, thank you @ben

[tombro]

This is a very brief walkthrough:

1. git clone

2. mv themes/sage themes/projectname

3. cd themes/projectname

4. composer install

5. rm tailwind.config.js

6. yarn remove @tailwindcss/typography

7. yarn remove tailwindcss

8. remove postCss: [require(‘tailwindcss’)], from webpack.mix.js

9. remove all tailwind references from resources/styles

10. yarn add bootstrap

11. touch resources/styles/config/external.scss && touch resources/styles/config/variables.scss

12. import bootstrap in resources/styles/config/external.scss

13. in resources/styles/app.scss, import config/variables & config/external

14. update blade files with bootstrap classes

15. optional: configure postcss

    const mix = require(‘laravel-mix’);
    const path = require(‘path’);
    require(‘laravel-mix-purgecss’);
    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://example.local’);

    mix
    .sass(‘resources/styles/app.scss’, ‘styles’)
    .sass(‘resources/styles/editor.scss’, ‘styles’)
    .purgeCss({
    extend: { content: [path.join(__dirname, ‘index.php’)] },
    safelist: require(‘purgecss-with-wordpress’).safelist,
    })
    .options({
    processCssUrls: false,
    });

    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
    .copy(‘resources/fontawesome-icons.json’, ‘public/fontawesome-icons.json’)
    .copyDirectory(‘resources/images’, ‘public/images’)
    .copyDirectory(‘resources/fonts’, ‘public/fonts’);

    mix
    .sourceMaps()
    .version();

[Tartamata]

Thanks @tombro, i’ll give it a try