Bootstrap Studio + Sass + Gulp + Browsersync

Problem

Bootstrap Studio doesn't currently support Sass.

Solution

With some creative workarounds, it's possible to get most of the benefits of Bootstrap Studio combined with a Gulp + Sass + Browsersync workflow.

Setup

File structure

1. Create a directory to hold the web-ready files (aka, an "app" directory).
2. Put sass source files in source/sass.

Gulp Sass / Browsersync

Set up a standard gulp Sass workflow:

• src: source/sass/**/*.scss
• dest: app/assets/css

Use these Browsersync options:

{
    server: app,
    files: [
        "app/*.html", 
        "app/**/*.js"
    ]
}

​​​​​​Bootstrap Studio

1. Name the page index.html
2. Configure the export settings to export to the app directory.
3. Link external stylesheet http://localhost:3000/assets/css/styles.css.
   This pulls in the css file(s) that will be served by gulp.
4. Link external JavaScript http://localhost:3000/assets/js/whatever.js.
   This pulls in the js file(s) that will be served by gulp.

Workflow

1. Run gulp serve as usual, using this server as the "preview" instead of the Bootstrap Studio preview.
2. Make css edits in an external editor.  If gulp is set up correctly, they will be recompiled automatically and injected into the preview via BrowserSync as usual.
3. Make HTML edits in Bootstrap Studio and export them to see the result in the BrowserSync server.  If BrowserSync is set up correctly, the exports will change the files in the app directory and trigger a reload.