I created a SCSS based starter kit by following the steps at: https://drupal-bootstrap.org/api/bootstrap/docs%21Sub-Theming.md/group/s...

However, I noticed that the file "scss/style.scss" in the starterkit has a statement:

@import '../bootstrap/assets/stylesheets/bootstrap';

but this path '../bootstrap/assets/stylesheets/bootstrap' does not exist.

The instructions on https://drupal-bootstrap.org/api/bootstrap/docs%21Sub-Theming.md/group/s... do not mention this path, so I would say that it is a bug (an omission) in this documentation.

Can you advise, please?

Comments

therobyouknow created an issue. See original summary.

therobyouknow’s picture

Assigned: Unassigned » therobyouknow

To solve this and have a working sub-theme based on bootstrap, in addition to the steps at https://drupal-bootstrap.org/api/bootstrap/docs%21Sub-Theming.md/group/s... the following additional things needed doing:

(Credit: https://www.webwash.net/getting-started-bootstrap-drupal-8/#create-sub-t... for steps 1) - 3) )

1) The bootstrap library itself was missing. The guide at: https://drupal-bootstrap.org/api/bootstrap/docs%21Sub-Theming.md/group/s... did not mention that one needs to do this

In your Drupal sub-theme (of bootstrap) top-level folder, I did the following to get the bootstrap library itself, my example is for v3.3.7:

 wget https://github.com/twbs/bootstrap-sass/archive/v3.3.7.tar.gz
 tar -xvf v3.3.7.tar.gz
 mv bootstrap-sass-3.3.7 bootstrap_sass

2) Go to bootstrap_sass/bootstrap/assets/stylesheets/bootstrap/_variables.scssand copy the variables into bootstrap_sass/scss/_default-variables.scss. Paste them just below the $icon-font-path variable.

The quickest way for me to do this was to:

(from my sub-theme top level folder)

cd bootstrap_sass/assets/stylesheets/bootstrap
cat _variables.scss >> ../../../../scss/_default-variables.scss

then, in the _default-variables.scss file,

delete the line:

$bootstrap-sass-asset-helper: false !default;

...that appears above the variables, as in:

$bootstrap-sass-asset-helper: false !default;
//
// Variables
// --------------------------------------------------

3) Edit scss/style.scss to change:

@import '../bootstrap/assets/stylesheets/bootstrap';

to:

@import '../bootstrap_sass/assets/stylesheets/bootstrap';

so that the whole scss/style.css file looks like:

@import "default-variables";

// Bootstrap Framework.
@import '../bootstrap_sass/assets/stylesheets/bootstrap';

// Base-theme overrides.
@import 'overrides';

4) I used gulp as my task runner for compiling scss to css, by following this guide here: https://www.digitalocean.com/community/tutorials/how-to-get-started-with...

But I had to custom adjust my particular gulpfile.js so that the statement...:

gulp.task('styles', function() {
  return gulp.src('scss/*.scss')
    .pipe(sass({ style: 'expanded' }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
    .pipe(gulp.dest('css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('css'));
}

was now:

gulp.task('styles', function() {
  return sass('scss/*.scss', {
     style: 'expanded' })
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
    .pipe(gulp.dest('css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('css'));
});

This was because I got an error when running gulp watch which was: "TypeError: glob pattern string required"

Credit: https://stackoverflow.com/a/32968934/227926

So this is what my whole gulpfile.js now looks like (with the old statement commented out):

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    rename = require('gulp-rename');

gulp.task('styles', function() {
  return sass('scss/*.scss', {
     style: 'expanded' })
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
    .pipe(gulp.dest('css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('css'));
});

/*
gulp.task('styles', function() {
  return gulp.src('scss/*.scss')
    .pipe(sass({ style: 'expanded' }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
    .pipe(gulp.dest('css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('css'));
}
*/

gulp.task('watch', function() {

  // Watch the sass files
  gulp.watch('scss/*.scss', ['styles']);

});

5) finally, the sub-theme should be in the custom folder and not the contrib folder, because it is a custom (sub)theme. e.g. docroot/themes/custom/your-bootstrap-sub-theme (again, the guide at https://drupal-bootstrap.org/api/bootstrap/docs%21Sub-Theming.md/group/s... didn't mention this)

To move it (if you need to): first set the site active theme back to bootstrap then disable your subtheme then move it into the custom folder and then re-enable it. Then clear the cache drush cr in docroot folder or via the performance settings in the admin pages.

Summary of credits:

therobyouknow’s picture

Status: Active » Fixed
markhalliwell’s picture

Status: Fixed » Closed (works as designed)
therobyouknow’s picture

MY steps aren't quite right - warning to others - sorry - I will come back and correct them. Thank you.