Roots Discourse

Switching from Foundation to Bootstrap "Sage Preset?"


Struggling to find out where I can switch from my original preference of Foundation back to Bootstrap 4.

I’ve not done any style or script editing or html yet - can I simple run sage preset again?

If so it’s not recognised when I’m trying in the console - maybe I’m in the wrong directory?


If you haven’t made any changes to the styles or scripts, then you are okay you can just run the preset. If you had, I’d make a back up of your assets folder before you did. From the root of your theme, you should be to follow this:


Wonderfully simple when you know how! Thanks I’ve added that to my notes too - I did buy the documentation but it wasn’t as extensive as I thought it maybe - this forum is priceless though


Sorry I’ve run into 1 issue When trying to “yarn build”:

This relative module was not found:

  • ./autoload/_foundation.js in ./resources/assets/scripts/main.js

I’ve looked in main.js and it doesn’t mention anything hardcoded to foundation and in the autoload folder for styles and scripts just has _bootstrap files

Any ideas - maybe a kind of cache issue?


When you ran the preset, did you say yes to prompt to override the files? You need to do that so it can add the _foundation.js to the autoload folder.


yep - I just ran it again to check and got the same error

This relative module was not found:

  • ./autoload/_foundation.js in ./resources/assets/scripts/main.js
    Asset Size Chunks Chunk Names
    scripts/main.js 11.5 kB 0 [emitted] main
    scripts/customizer.js 3.25 kB 1 [emitted] customizer
    styles/main.css 237 kB 0 [emitted] main
    scripts/ 14.7 kB 0 [emitted] main
    styles/ 423 kB 0 [emitted] main
    scripts/ 3.08 kB 1 [emitted] customizer
    error Command failed with exit code 2.
    info Visit for documentation about this command.


My main.js looks like this:

// import external dependencies
import ‘jquery’;

// Import everything from autoload
import “./autoload/**/*”

// import local dependencies
import Router from ‘./util/Router’;
import common from ‘./routes/common’;
import home from ‘./routes/home’;
import aboutUs from ‘./routes/about’;
import map from ‘./routes/map’;

/** Populate Router instance with DOM routes */
const routes = new Router({
// All pages
// Home page
// About Us page, note the change from about-us to aboutUs.

// Load Events
jQuery(document).ready(() => routes.loadEvents());


Here are the stubs for each preset:


Just wipe the theme directory and start from scratch if you’re having this many problems :wink:



Sorry I couldn’t reply… it was simply a caching issue - so I emptied my .cache-loaded folder and it worked just fine. I guess that was meant to be automated with the preset line to clear the cache but it didn’t seem to work.